* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  font-size: 10px;

  line-height: 1;

}

body {

  font-family: Arial, "微软雅黑", sans-serif;

  color: #2d343f;

  font-size: 16px;

  background-color: #fff;

  overflow-x: hidden;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  line-height: inherit;

  font-size: inherit;

  font-weight: normal;

}

i {

  font-style: normal;

}

img {

  border: none;

  vertical-align: middle;

}

ul,

ol {

  list-style: none;

}

li {

  list-style: inherit;

}
.neisj{ line-height:30px; text-align:center;}
.neimiao{ padding:5px; border-bottom:2px solid #CCCCCC; font-size:14px; font-weight:bold;line-height:30px;}
/*--通用样式----*/
.sec_right_con_news_list li{ border-bottom:#ccc 1px dotted; background:url(../images/dian.jpg) no-repeat 10px center; text-indent:24px; line-height:50px; }
.sec_right_con_news_list li span{ float:right;}
  
input,

textarea,

button,

span,

li,

a,

div {

  border: none;

  outline: none;

  resize: none;

}

textarea {

  font-family: Arial, "微软雅黑", sans-serif;

  overflow: auto;

}

table {

  width: 100%;

  border-spacing: 0;

  border-collapse: collapse;

}

a,

a:active,

a:hover,

a:visited {

  color: inherit;

  font-size: inherit;

  text-decoration: none;

}

.fl {

  float: left;

}

.fr {

  float: right;

}

.clearfix {

  *zoom: 1;

}

.clearfix:before,

.clearfix:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

.mycol {

  margin: 0 -10px;

  *zoom: 1;

}

.mycol:before,

.mycol:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

.mycol .col {

  float: left;

  padding: 0 10px;

  text-align: center;

}

.mycol .col img {

  max-width: 100%;

}
.mycol-3 .col{width:33.333%;}
.mycol2 {

  margin: 0 -6.5vw;

  *zoom: 1;

}

.mycol2:before,

.mycol2:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

.mycol2 .col {

  float: left;

  padding: 0 6.5vw;

  text-align: center;

}

.mycol2 .col img {

  max-width: 100%;

}

.mycol-2 .col {

  width: 50%;

}

/*.mycol-3 .col {

  width: 33.33333%;

}*/

.mycol-4 .col ,.my4 .col{

  width: 25%;

}

.mycol-5 .col {

  width: 20%;

}

.box {

  display: block;

}

.center-fa {

  position: relative;

}

.center-fa .center {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,50%);

}

.center-fa .centerX {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

}

.center-fa .centerY {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

.center-img {

  height: 100%;

  position: relative;

  overflow: hidden;

}

.center-img img {

  position: absolute;
/*
  left: 50%;

  top: 50%;*/

  width: auto;

  max-width: none;

  min-width: 100%;

  height: 100%;

  /*transform: translate(-50%,-50%);*/

}

.center-img-hover img {

  transition: all .3s;

}

.center-img-hover:hover img {

    transform: scale(1.04);
        transition: all .5s;

}

.full-img {

  width: 100%;

  height: 0;

  position: relative;

}

.full-img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}

.lr-ti li {

  overflow: hidden;

}

.lr-ti li > div {

  width: 100%;

  height: 100%;

  float: left;

}

.lr-ti li > div.txt1 {

  width: 50%;

  height: 100%;

  float: left;

}

.lr-ti li > div.img1 {

  width: 50%;

  height: 100%;

  float: left;

}

.lr-ti li > div .box {

  height: 100%;

}

.lr-ti li > div .box > div {

  width: 100%;

}

.lr-ti li:nth-child(2n) > div {

  float: right;

}

.hvr-color {

  transition: all .3s;

}

.hvr-color:hover {

  color: #296ebc;

}

.w {

  width: 1400px;

  margin: 0 auto;

  *zoom: 1;

}

.w:before,

.w:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

.w1600 {

  width: 1600px;

  margin: 0 auto;

  *zoom: 1;

}

.w1600:before,

.w1600:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

.bg-img {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}

.bg-left {

  background-position: left center;

  background-repeat: no-repeat;

}

.imgs-btn img {

  cursor: zoom-in;

}

.com-padding {

  padding-top: 80px;

  padding-bottom: 60px;

}

.pt0 {

  padding-top: 0;

}

.pb0 {

  padding-bottom: 0;

}

.p-color {

  color: #7c7c7c;

}

.tsi {

  transition: all .3s;

}

.com-bg {

  background-color: #f4f4f4;

}

.com-ba:before,

.com-ba:after {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  transition: transform .3s;

}

.com-title {

  text-align: center;

}

.com-title h3 {

  display: inline-block;

  height: 60px;

  margin-bottom: 20px;

  font-size: 36px;

  position: relative;

}

.com-title h3:before {

  content: '';

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 80%;

  transform: translateX(-50%);

  border-bottom: 1px solid #ddd;

}

.com-title h3:after {

  content: '';

  position: absolute;

  left: 50%;

  bottom: -1px;

  width: 30px;

  margin-left: -15px;

  border-bottom: 3px solid #296ebc;

}

.com-title p {

  height: 85px;

  color: #7c7c7c;

}

.com-title .more {

  display: block;

  margin-bottom: 30px;

  margin-top: -20px;

  color: #296ebc;

  font-size: 14px;

}

.position {

  height: 55px;

  line-height: 55px;

  overflow: hidden;

  font-size: 14px;

  transition: all .3s;

  background-color: #f4f4f4;

}

.position a {

  transition: all .3s;

}

.position a:hover {

  color: #296ebc;

}

.position.top {

  position: fixed;

  left: 0;

  top: 60px;

  width: 100%;

  background: #fff;

  z-index: 998;

  border-bottom: 1px solid #ddd;

}

.position .nav a {

  display: inline-block;

  width: 115px;

  text-align: center;

  color: #333;

  transition: all .3s;

}

.position .nav a.active {

  background: #296ebc;

}

.position .pos > a,

.position .w > a {

  transition: all .3s;

}

.position .pos > a:hover,

.position .w > a:hover {

  color: #296ebc;

}

.go-top {

  display: none;

  cursor: pointer;

}

.go-top:before,

.go-top:after {

  content: '';

  position: fixed;

  right: 20px;

  bottom: 150px;

  width: 50px;

  height: 50px;

  background-color: #999;

  border-radius: 5px;

  z-index: 9999;

}

.go-top:before {

  background: none;

  width: 20px;

  height: 20px;

  right: 34px;

  bottom: 158px;

  border: 3px solid #fff;

  border-bottom: none;

  border-right: none;

  transform: rotate(45deg);

  z-index: 2;

  border-radius: 0;

  z-index: 99999;

}

body {

  padding-top: 100px;

}

.header {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100px;

  line-height: 100px;

  padding-left: 4vw;

  box-shadow: 0 5px 30px -20px #000;

  background: #fff;

  z-index: 999;

}

.header .logo {

  position: relative;

}

.header .logo a {

  display: block;

  font-size: 0;

}

.header .logo p {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 120px;

  color: #666;

  font-size: 16px;

  white-space: nowrap;

}

.header .logo p span {

  display: block;

  height: 30px;

  color: #333;

  font-size: 20px;

}

.header .nav {

  width: calc(110% - 888px);

  height: 100%;

  text-align: right;

}

.header .nav ul {

  width: 100%;

  height: 100%;

  display: inline-block;

}

.header .nav li {

  display: inline-block;

  margin-right: 3vw;

  position: relative;

}

.header .nav li > a {

  height: 54px;

  line-height: 54px;

  color: #3c3c3c;

  font-size: 18px;

  display: block;

  transition: all .3s;

  position: relative;

}

.header .nav li > a:after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 1px;

  width: 100%;

  border-top: 2px solid #296ebc;

  transform: scaleX(0);

  z-index: 2;

  transition: all .3s;

}

.header .nav li:hover > a,

.header .nav li.active > a {

  color: #296ebc;

}

.header .nav li:hover > a:after,

.header .nav li.active > a:after {

  transform: scaleX(1);

}

.wrap {

  width: 1366px;

  margin-right: auto;

  margin-left: auto;

}

.fix:before, .fix:after {

  display: table;

  clear: both;

  content: '';

}

.fix:before, .fix:after {

  display: table;

  clear: both;

  content: '';

}

.header  .nav_down{position:absolute;left: 520%;margin-left:-960px;top:145%;width:1920px;max-width:none;background:url(../images/xl2.jpg) no-repeat center bottom;/* padding:67px 0 86px;*/padding:50px 0;display:none;}

.header .nav_le{left: 135%;}

.header .nav_lf{left:-230%;}

.header  .nav_down .rect-62{padding-bottom:62%;}

.header  .nav_down .left{width:65%; float:left;}

.header  .nav_down .left .title{font-size:32px; line-height:34px; font-weight:bold; color:#000;}

.header  .nav_down .left .content .intro {width:52.5%; float:left; margin-top:40px;}

.header  .nav_down .left .content .intro ul li{font-size:18px; line-height:56px; color:#414141; position:relative; padding-left:3%;margin-right: 0; width:47%; float:left;}

.header  .nav_down .left .content .intro ul li:before{content:''; width:6px; height:9px; background:url(../images/xl_jt.png) no-repeat; position:absolute; left:0; top:50%; margin-top:-4px;}

.header  .nav_down .left .content .intro ul li:hover:before{background-position:0 -9px;}

.header  .nav_down .left .content .intro ul li a{height: auto;line-height: 2em;text-align: left;}

.header  .nav_down .left .content .img{width:40%; float:right; padding-right:6%;}

.header  .nav_down .right{width:25.5%; float:right;text-align: left;}

.header  .nav_down .right .tit{font-size:32px; line-height:32px; color:#343434; font-weight:lighter;}

.header  .nav_down .right .tit span{color:#296ebc; font-weight:bold; margin-right:10px;}

.header  .nav_down .right .con{margin-top:50px;}

.header  .nav_down .right .con a{display:block; font-size:16px; line-height:36px; color:#666666; font-weight:lighter; position:relative; padding-left:3%;}

.header  .nav_down .right .con a:before{content:''; width:6px; height:9px; background:url(../images/xl_jt.png) no-repeat; position:absolute; left:0; top:50%; margin-top:-4px;}

.header  .nav_down .right .con a:hover{color:#296ebc;}

.header  .nav_down .right .con a:hover:before{background-position:0 -9px;}

.header  .nav_down{border-top:1px solid #e4e4e4;}

.header  .proNav_down .left li.cur{background:#dae5e3;}

.header  .nav_down .left .title {font-size: 24px;line-height: 24px;}

.header  .nav_down .left .content .intro ul li{width:48%; line-height:32px; font-size:16px;} 

.header  .nav_down{padding:40px 0;}

.header  .nav_down .left .content .intro{margin-top:23px;}

.header  .nav_down .left .title{font-size:28px; line-height:28px;text-align: left;}

.header  .nav_down .left .content .intro ul li{line-height:45px;}

.header  .nav_down .left .content .img{margin-top:-62px;}

.header  .nav_down .right .con {margin-top:28px; line-height:28px;}

.header  .proNav_down{position:absolute;left:335%;margin-left:-960px;top:145%;width:1920px;max-width:none;background:#f4f4f4; display:none;height:470px;}

.header  .proNav_down:after{content:''; width:725px; height:502px; position:absolute; left:62.7%; bottom:0; background:url(../images/xc_logo.jpg) no-repeat center; z-index:1}.header  .proNav_down .left{width:33%; float:left; padding:40px 0;text-align: left;}

.header  .proNav_down .left li{height:auto; line-height:82px; font-size:18px; color:#414141; padding-left:0px;display: block;position: static;}
.header  .proNav_down .left ul{    overflow: auto;
    display: block;
    height: 420px;}
    .header  .proNav_down .left{padding: 20px 0;}
.header  .proNav_down .left ul::-webkit-scrollbar {
width: 5px;

height: 5px;

}

/* 滚动条里面小方块 */

.header  .proNav_down .left ul::-webkit-scrollbar-thumb {
border-radius: 5px;

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

background: rgba(0,0,0,0.2);

}

/* 滚动条里面轨道 */

.header  .proNav_down .left ul::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

border-radius: 0;

background: rgba(0,0,0,0.1);

}
.header  .proNav_down .left li a{display:block;}

.header  .proNav_down li>a::after{display: none;}

.header  .proNav_down .left li span{display:inline-block; vertical-align:middle;}
.header  .proNav_down .left li p{

  content: '';

  position: absolute;

  left: 0;

  bottom: 1px;

  width: 100%;

  border-top: 2px solid #296ebc;

  transform: scaleX(0);

  z-index: 2;

  transition: all .3s;

}
.header  .proNav_down .left li:hover p{transform: scaleX(1);}
.header  .proNav_down .left li span.icon{width:53px; height:32px; margin-right:40px;}

.header  .proNav_down .left li.cur{background:#fff; color:#296ebc;}

.header  .proNav_down .center{width:35%; float:left; background:#fff; padding:40px 0; height:470px; position:relative;text-align: left;}

.header  .proNav_down .center .more_{position:absolute; right:20px; bottom:20px;}

.header  .proNav_down .center .more_:hover{color:#296ebc;}



.header  .proNav_down .center li{padding-left:70px;display: block;position: static;margin-right:0;}

.header  .proNav_down .center div{display: none;}

.header  .proNav_down .center div:nth-child(1){display: block;}

.header  .proNav_down .center li a{display:block; font-size:17px; color:#585858; line-height:30px; height: 40px; position:relative; padding-left:5%;}


.header  .proNav_down .center li a:before{content:''; width:6px; height:9px; background:url(../images/xl_jt.png) no-repeat; position:absolute; left:0; top:50%; margin-top:-4px;}

.header  .proNav_down .center li a:hover:before{background-position:0 -9px;}

.header  .proNav_down .center li a:hover{color:#296ebc;}

.header  .proNav_down .right{width:25%; float:right; margin-top:25px; padding:40px 0; position:relative; z-index:2;text-align: left;}

.header  .proNav_down .right .tit{font-size:32px; line-height:32px; color: #343434; font-weight:lighter;}

.header  .proNav_down .right .tit span{font-weight:bold; color:#296ebc;}

.header  .proNav_down .right .con{margin-top:30px;}

.header  .proNav_down .right .con a{display:block; font-size:16px; line-height:36px; color:#666666; font-weight:lighter; position:relative; padding-left:3%;}

.header  .proNav_down .right .con a:before{content:''; width:6px; height:9px; background:url(../images/xl_jt.png) no-repeat; position:absolute; left:0; top:50%; margin-top:-4px;}

.header  .proNav_down .right .con a:hover{color:#296ebc;}

.header  .proNav_down .right .con a:hover:before{background-position:0 -9px;}

.header  .proNav_down .right .tel{margin-top:60px;}

.header  .proNav_down .right .tel .t{font-size:18px; line-height:30px; color:#373737;}

.header  .proNav_down .right .tel .c{font-size:26px; line-height:30px; color:#296ebc; font-weight:bold; margin-top:3px; margin-bottom: 20px;}



@media only screen and (max-width: 1440px){

  .header .nav_down {

    background: url(../images/xl2.jpg) no-repeat -133px -143px;

}

.wrap, .mwrap {

  width: 1200px;

}

.header  .nav_down .left {

  width: 60%;

}

.header  .nav_down .right {

  width: 30%;

  padding-right: 8%;

}

}

.header .nav .subnav {

  position: absolute;

  left: 50%;

  bottom: -30px;

  transform: translate(-50%,100%);

  width: 140px;

  height: 0;

  overflow: hidden;

  background: #fff;

  opacity: 0;

  transition: bottom .5s, opacity .5s;

  text-align: center;

}

.header .nav .subnav > a {

  display: block;

  line-height: 1;

  padding: 10px 0;

  font-size: 14px;

}

.header .nav .subnav > a:hover {

  color: #296ebc;

  background: #f4f4f4;

}

.header .nav li:hover .subnav {

  padding: 20px 0;

  height: auto;

  bottom: -1px;

  opacity: 1;

  box-shadow: 0 0 30px -20px #000;

}

.header .phone {

  font-size: 0;

}

.header .phone p {

  float: left;

  height: 100%;

  padding-left: 35px;

  color: #296ebc;

  font-size: 20px;

  font-weight: 700;

  text-align: right;

  margin-right: 25px;

  background: url(../images/tell.png) left center no-repeat;

}

.header .phone .lang {

  float: left;

  width: 100px;

  height: 100px;

  position: relative;

  background: #296ebc;

  transition: .8s;

}

.header .phone .lang > a {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  display: block;

  margin-top: -6px;

  margin-left: -6px;

  color: #fff;

  font-size: 14px;

  line-height: 1.1;

  text-align: center;

  border: 2px solid #296ebc;



  z-index: 2;

}

.header .phone .lang:hover .lang_p{transform: translateY(72%);opacity: 1;}

.header .phone .lang:hover{width: 140px;}

.header .phone .lang_p{position: absolute;width:100%;box-shadow: 0 2px 12px rgb(0 0 0 / 10%);

  border-radius: 4px;right: 0px; top:50px; opacity: 0; transition: .8s;transform: translateY(-100%);z-index: 5;}


.header .phone .lang_p li:hover a{background:#296ebc;color: #fff;}

.header .phone .lang_p li a{display: block;color: #333;font-size: 15px;height: 70px;line-height: 70px;

  background:#fff;text-align: center;transition: .8s;}

.header .phone .lang > a.active {

  margin: 0;

  margin-top: 6px;

  margin-left: 6px;

  color: #fff;

  background: #296ebc;

  z-index: 1;

}

.header .phone .search {

  float: left;

  width: 100px;

  height: 100px;

  text-align: center;

 

}

.header .phone span {

  display: block;

  width: 100%;

  height: 100%;

}

.header .phone form {

  display: none;

  position: fixed;

  top: 100px;

  left: 0;

  width: 100%;

  height: 80px;

  line-height: 80px;

  background-color: #fff;

  border-top: 1px solid #296ebc;

  text-align: center;

  z-index: 2;

}

.header .phone form input {

  display: inline-block;

}

.header .phone form .key {

  width: 30%;

  height: 40px;

  border-radius: 40px;

  padding-left: 20px;

  padding-right: 100px;

  border: 1px solid #ccc;

}

.header .phone form .sub {

  position: relative;

  left: -80px;

  width: 80px;

  height: 40px;

  border-radius: 40px;

}

.header.top {

  position: fixed;

  left: 0;

  top: 30px;

  height: 60px;

  line-height: 60px;

  background: #fff;

  opacity: 0;

  visibility: hidden;

  transition: all .3s;

  z-index: 1000;

}

.header.top li > a {

  height: 60px;

  color: #2d343f;

}

.header.top li > a:hover {

  color: #296ebc;

}

.header.top.active {

  top: 0;

  opacity: 1;

  visibility: visible;

}

.swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  background-color: #fff;

  opacity: 1;

}

.swiper-pagination-bullet-active {

  background-color: #296ebc;

}

.swiper-pagination.swiper-pagination {

  bottom: 30px;

}

div.swiper-button-next,

div.swiper-button-prev {

  width: 34px;

  height: 34px;

  border-radius: 5px;

  background: #296ebc;

}

.swiper-button-next:after,

.swiper-button-prev:after {

  content: "";

  position: absolute;

  left: 50%;

  top: 50%;

  width: 8px;

  height: 8px;

  border: 2px solid #fff;

  border-left: none;

  border-bottom: none;

  transform: translate(-50%,-50%) rotate(45deg);

}

.swiper-button-prev:after {

  left: 50%;

  transform: translate(-50%,-50%) rotate(-135deg);

}

.swiper-button-next:before,

.swiper-button-prev:before {

  content: '';

  position: absolute;

  left: 45%;

  top: 50%;

  width: 15px;

  margin-left: -8px;

  margin-top: -1px;

  border-bottom: 2px solid #fff;

}

.swiper-button-prev:before {

  margin-left: -2px;

}

.swiper-button-next:hover,

.swiper-button-prev:hover {

  background-color: #296ebc;

}

.swiper-button-next:hover:after,

.swiper-button-prev:hover:after {

  border-color: #fff;

}

.index-banner {

  width: 100%;

}

.index-banner img {

  width: 100%;

}

.index-banner .swiper-pagination-bullet.swiper-pagination-bullet {

  margin: 0 12px;

}

.index-banner .swiper-pagination-bullet-active {

  background: #fff;

  position: relative;

}

.index-banner .swiper-pagination-bullet-active:after {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  width: 20px;

  height: 20px;

  margin-left: -10px;

  margin-top: -10px;

  background: #fff;

  opacity: .3;

  border-radius: 50%;

}

.index-service {

  padding: 50px 0;

  background: #fafafa;

  box-shadow: 0 4px 20px -15px #000;

}

.index-service .main li .box {

  display: block;

  padding-left: 70px;

  text-align: left;

}

.index-service .main li h4 {

  height: 35px;

  color: #3c3c3c;

  font-size: 20px;

}

.index-service .main li p {

  color: #7c7c7c;

  font-size: 14px;

}

.index-product .nav {

  text-align: center;
    padding-bottom: 10px;
   position: relative;
}

.index-product .nav .swiper-button-next{right: -50px;background: transparent;}
.index-product .nav .swiper-button-next:before{border:none;}
.index-product .nav .swiper-button-next:after{border: 2px solid #0c1f89; width: 15px;height: 15px;border-left: none;
    border-bottom: none;}
.index-product .nav a {

  display: inline-block;

  line-height: 36px;

  border-radius: 36px;

  padding: 0 10px;

  transition: all .3s;

}

.index-product .nav a.active {

  color: #fff;

  background: #296ebc;

}

.index-product .main {

  position: relative;

}

.index-product .main .item {

  position: absolute;

  width: 100%;

  left: 0;

  top: 0;

  transform: translateY(10px);

  z-index: -1;

  opacity: 0;

  transition: all .3s;

}

.index-product .main .item.active {

  position: relative;

  z-index: 1;

  opacity: 1;

  transform: translateY(0);

}

.index-product .main .swiper-container {

  padding: 80px  0 30px;

  height: 630px;

}

.index-product .main li {

  text-align: center;

  padding: 40px 2vw;

  border-radius: 10px;

  transition: all .3s;

  top: 0;

}

.index-product .main li .img {

  height: 295px;

}

.index-product .main li .img img {

  max-width: 90%;

  max-height: 90%;
  border:1px solid #CCC;

}

.index-product .main li .txt h4 {

  height: 22px;

  margin-bottom: 18px;

  font-size: 20px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.index-product .main li .txt p {

  height: 0;

  overflow: hidden;

  color: #7c7c7c;

  font-size: 14px;

  line-height: 25px;

  margin-top: -5px;

  opacity: 0;

  transition: all .3s;

}

.index-product .main li .txt .more {

  display: none;

  line-height: 32px;

  font-size: 0;

  opacity: 0;

  transition: all .3s;

}

.index-product .main li .txt .more a {

  display: inline-block;

  width: 110px;

  color: #fff;

  font-size: 16px;

  background: #296ebc;

}

.index-product .main li .txt .more a:first-child {

  background: #296ebc;

  border-radius: 20px;

}

.index-product .main li .txt .more a:last-child {

  border-radius: 20px;

}

.index-product .main li .txt .more2 a {

  display: inline-block;

  margin-top: 20px;

  line-height: 30px;

  border-bottom: 1px solid #296ebc;

  color: #296ebc;

}

.index-product .main li:hover {

  box-shadow: 0 0 25px -0 #ddd;

  position: relative;

  top: -30px;

}

.index-product .main li:hover h4 {

  color: #296ebc;

}

.index-product .main li:hover p {

  height: 75px;

  opacity: 1;

}

.index-product .main li:hover .more {

  display: inline-block;

  opacity: 1;

}

.index-product .main li:hover .more2 {

  display: none;

}

.index-product .main div.swiper-button-next {

  right: -90px;

}

.index-product .main div.swiper-button-prev {

  left: -90px;

}

.index-case .main li {

  margin-bottom: 20px;

}

.index-case .main li .box {

  border: 1px solid #ddd;

  text-align: left;

}

.index-case .main li .img {

  padding-bottom: 80%;

}

.index-case .main li .txt {

  background: #fff;

  padding: 25px 20px;

}

.index-case .main li .txt h4 {

  height: 22px;

  margin-bottom: 18px;

  font-size: 20px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.index-case .main li .txt p {

  height: 50px;

  overflow: hidden;

  color: #7c7c7c;

  font-size: 14px;

  line-height: 25px;

  margin-top: -5px;

}

.index-case .main li .txt .more {

  display: block;

  padding-top: 15px;

  margin-top: 20px;

  border-top: 1px solid #ddd;

  color: #296ebc;

  font-size: 14px;

  transition: all .3s;

}

.index-case .main li .txt .more:hover {

  color: #296ebc;

}

.index-case .get {

  display: block;

  width: 220px;

  line-height: 35px;

  border-radius: 35px;

  margin: 50px auto 0;

  text-align: center;

  color: #296ebc;

  border: 1px solid #296ebc;

}

.index-about {

  position: relative;

}

.index-about .txt {

  width: 50%;

  padding-right: 3vw;

  padding-top: 50px;

}

.index-about .txt h2 {

  margin-left: -100px;

  margin-bottom: 35px;

  padding-top: 40px;

  padding-left: 100px;

  color: #296ebc;

  font-size: 42px;

  background: url(../images/gtd_bg.png) top left no-repeat;

}

.index-about .txt h3 {

  height: 45px;

  color: #3c3c3c;

  font-size: 20px;

}

.index-about .txt .con p {

  color: #7c7c7c;

  line-height: 30px;

  margin-top: -7px;

}

.index-about .txt a.more {

  display: block;

  width: 160px;

  line-height: 36px;

  border-radius: 36px;

  margin-top: 60px;

  text-align: center;

  color: #fff;

  background: #296ebc;

}

.index-about .img {

  position: absolute;

  right: 0;

  width: 50%;

  padding-left: 4vw;

}

.index-about .img .video {

  display: block;

  width: 100%;

  height: 560px;

  border-top-left-radius: 50px;

  overflow: hidden;

}

.index-about .img .video:after {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: url(../images/icon_play01.png) center no-repeat;

}

.index-about .img .more {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  padding: 25px 40px;

  background: #fff;

  border-top-right-radius: 20px;

  border-bottom-left-radius: 20px;

  box-shadow: 0 0 30px -20px #000;

}

.index-about .img .more a {

  display: block;

  height: 120px;

  padding-top: 75px;

  text-align: center;

  background-position: center 30px;

  background-repeat: no-repeat;

}

.index-about .img .more a:hover {

  color: #296ebc;

}

.index-about .num {

  background-color: #f4f4f4;

  padding: 35px 0;

  margin-top: 60px;

}

.index-about .num .list {

  width: 46%;

}

.index-about .num li h4 {

  height: 60px;

  font-size: 20px;

}

.index-about .num li h4 span {

  color: #296ebc;

  font-size: 52px;

  font-weight: 700;

  vertical-align: top;

}

.index-about .num li p {

  color: #3c3c3c;

  font-size: 14px;

}

.index-about .num li .i {

  height: 60px;

}

.index-news .nav {

  margin-bottom: 30px;

}

.index-news .nav a {

  display: inline-block;

  line-height: 36px;

  border-radius: 36px;

  padding: 0 30px;

  margin: 0 5px;

  transition: all .3s;

}

.index-news .nav .zhan{display: none;}

.index-news .nav a:hover,

.index-news .nav a.active {

  color: #fff;

  background: #296ebc;

}

.index-news .nav a.fr {

  padding: 0;

  margin: 0;

  color: #2d343f;

  background: none;

}

.index-news .nav a.fr:hover {

  color: #296ebc;

}

.index-news .left {

  width: 50%;

  padding-right: 30px;

}

.index-news .left .main .img {

  height: 415px;

}

.index-news .left .main .img img {

  height: 100%;

}

.index-news .left .main .txt {

  padding: 35px;

  padding-bottom: 25px;

  border: 1px solid #ddd;

}

.index-news .left .main .txt h4 {

  height: 22px;

  margin-bottom: 18px;

  font-size: 20px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.index-news .left .main .txt p {

  height: 50px;

  overflow: hidden;

  color: #999;

  font-size: 14px;

  line-height: 25px;

  margin-top: -5px;

}

.index-news .left .main .txt .date {

  margin: 20px -15px 0;

  padding: 20px 15px 0;

  color: #7c7c7c;

  border-top: 1px solid #ddd;

}

.index-news .right {

  width: 50%;

  padding-left: 30px;

}

.index-news .right .main {

  position: relative;

  bottom: -40px;

  height: 0;

  opacity: 0;

  overflow: hidden;

  transition: all .3s;

}

.index-news .right .main.active {

  height: auto;

  opacity: 1;

  bottom: 0;

}

.index-news .right .main li {

  padding: 20px 0;

}

.index-news .right .main li ~ li {

  border-top: 1px solid #ddd;

}

.index-news .right .main li .img {

  width: 195px;

  height: 120px;

}

.index-news .right .main li .img img {

  height: 100%;

}

.index-news .right .main li .txt {

  width: calc(100% - 220px);

  position: relative;

}

.index-news .right .main li .txt h4 {

  height: 20px;

  overflow: hidden;

  margin-bottom: 18px;

  font-size: 18px;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.index-news .right .main li .txt p {

  height: 50px;

  line-height: 25px;

  overflow: hidden;

  margin-bottom: 10px;

  margin-top: -5px;

  color: #999;

  font-size: 14px;

}

.index-news .right .main li .txt .date {

  color: #7c7c7c;

  font-size: 14px;

}

.index-partner .main {

  position: relative;

}

.index-partner .main li {

  height: 120px;

  line-height: 115px;

  text-align: center;

  border: 1px solid #ddd;

  background: #fff;

}

.index-partner .main li img {

  max-width: 100%;

  max-height: 100%;

}

.index-partner .main div.swiper-button-prev {

  left: -70px;

}

.index-partner .main div.swiper-button-next {

  right: -70px;

}

.index-after .w {

background: #1d2088;

  padding-left: 4vw;

  padding-right: 4vw;

  position: relative;

  bottom: -130px;

  margin-top: -130px;

  border-bottom: 3px solid #296ebc;

  z-index: 2;

}

.index-after .w p{color: #fff;font-size: 30px;}

.index-after .main .img {

  height: 75px;

}

.index-after .main h4 {

  height: 30px;

  font-size: 20px;

}

.index-after .main p {

  color: #7c7c7c;

  font-size: 14px;

}

.banner {

  width: 100%;

  overflow: hidden;

}

.banner img {

  width: 100%;

  transition: all 1s;

}

.banner img:hover {

  transform: scale(1.02);

}

.banner .pos {

  color: #fff;

  line-height: 70px;

  position: relative;

  top: -70px;

  margin-bottom: -70px;

}

.product .main {

  height: 660px;

  background: url(../images/index_pro_bg01.png);

}

.pro-main-title {

  float: left;

  width: 233px;

  padding-top: 50px;

  padding-bottom: 50px;

  background-color: #296ebc;

  text-align: center;

  position: relative;

}

.pro-main-title:before {

  content: '';

  position: absolute;

  left: -20px;

  top: 0;

  width: 20px;

  height: 60px;

}

.pro-main-title h3 {

  height: 65px;

  color: #fff;

  font-size: 32px;

  position: relative;

}

.pro-main-title h3:after {

  content: '';

  position: absolute;

  left: 50%;

  bottom: 0;

  transform: translateX(-50%);

  width: 40px;

  height: 2px;

  background-color: #fff;

}

.pro-main-title img {

  display: block;

  margin: 40px auto 25px;

}

.pro-main-title a.more {

  display: inline-block;

  width: 135px;

  height: 40px;

  line-height: 40px;

  border-radius: 37px;

  color: #296ebc;

  font-size: 18px;

  background-color: #fff;

  transition: all .3s;

}

.pro-main-title a.more:hover {

  width: 150px;

}

.pro-main-title p {

  display: inline-block;

  line-height: 25px;

  padding-left: 35px;

  margin-top: 20px;

  color: #fff;

  opacity: .6;

  background: url(../images/phone_icon02.png) left center no-repeat;

}

.pro-main-title h4 {

  margin-top: 10px;

  color: #fff;

  font-size: 22px;

}

.product .list {

  /*background: url(../images/index_pro_bg01.png);*/

}

.pro-main-title a.more {

  color: #fff;

  border: 1px solid #fff;

  background: none;

}

.pro-main-title a.more:hover {

  color: #296ebc;

  background-color: #fff;

}

.pro-main-title ul {

  padding: 80px 0;

  margin: 30px 0;

  position: relative;

}

.pro-main-title ul:before,

.pro-main-title ul:after {

  content: '';

  position: absolute;

  left: 50%;

  top: 0;

  height: 60px;

  border-left: 1px solid #fff;

}

.pro-main-title ul:after {

  top: auto;

  bottom: 0;

}

.pro-main-title li {

  padding: 10px 6px;

  position: relative;

}

.pro-main-title li i{color: #fff;

  position: absolute;

  width: 12%;

  left: 5%;

  top: 19px;

  background: #ca1c1d;

  padding: 5px 8px;

  cursor: pointer;

  box-sizing: border-box;}

.pro-main-title li a {

  display: block;

  width: 100%;

  height: 45px;

  line-height: 45px;


  color: #fff;

  font-size: 18px;

  border-radius: 45px;

  transition: all .3s;


}

.pro-main-title li dl{display: none;}

.pro-main-title li a:hover,

.pro-main-title li a.active {

  color: #296ebc;

  background-color: #fff;

}

.product .com-search .w {

  padding-left: 250px;

}

.product .list .main {

  float: right;

  width: calc(100% - 250px);

  height: auto;

  background: none;

}

.product .list .main li .img {

  height: 300px;

  line-height: 300px;

  background: #fff;

}

.product .list .main li .img img {

  max-width: 100%;

  max-height: 100%;

}

.product .list .main li h4 {

  height: 50px;

  line-height: 50px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  margin-bottom: 30px;

}

.case li {

  margin-bottom: 20px;

}

.case li .img {

  padding-bottom: 70%;

}

.case li h4 {

  height: 65px;

  overflow: hidden;

  padding-top: 15px;

  line-height: 1.5;

  font-size: 14px;

}

.join-require .main ul.mycol {

  margin: 0 -2.5vw;

}

.join-require .main li.col {

  padding: 0 2.5vw;

}

.join-require .main .box {

  padding: 2.5vw 3.5vw;

  background: #313131;

  text-align: left;

  color: #296ebc;

}

.join-require .main .box h4 {

  height: 35px;

  font-size: 28px;

}

.join-require .main .box h5 {

  height: 40px;

  font-size: 14px;

}

.join-require .main .box img {

  width: 100%;

  margin-bottom: 30px;

}

.join-require .main .box .con,

.join-require .main .box .con p {

  line-height: 25px;

  color: #fff;

  font-size: 14px;

}

.join-require .more {

  display: block;

  width: 150px;

  line-height: 45px;

  margin: 3.5vw auto 0;

  text-align: center;

  color: #296ebc;

  font-size: 14px;

  background: #313131;

}

.join-policy .main {

  position: relative;

  top: -145px;

  margin-bottom: -145px;

  margin-left: 270px;

  width: calc("~100% - 270px");

  padding: 60px 0;

  background: url(../images/join_policy_bg02.png) 42% top no-repeat;

  background-size: auto 100%;

  *zoom: 1;

}

.join-policy .main:before,

.join-policy .main:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

.join-policy .main li {

  float: left;

  width: 50%;

  margin-right: 1%;

  padding-left: 30px;

  border-left: 7px solid #296ebc;

  color: #fff;

  position: relative;

}

.join-policy .main li:nth-child(2n - 1) {

  float: right;

}

.join-policy .main li h4 {

  height: 50px;

  font-size: 22px;

  font-weight: 700;

}

.join-policy .main li .con {

  width: 90%;

}

.join-policy .main li .con p {

  line-height: 30px;

}

.join-policy .main li span {

  position: absolute;

  right: -10px;

  top: 50%;

  transform: translateY(-50%);

  display: block;

  width: 75px;

  height: 75px;

  line-height: 75px;

  text-align: center;

  color: #296ebc;

  font-size: 38px;

  border: 1px solid #296ebc;

  border-radius: 50%;

  background: #fff;

}

.join-policy .main li:nth-child(2n - 1) span {

  right: auto;

  left: -140px;

}

.join-after .main li:nth-child(2) {

  padding-top: 5vw;

}

.join-after .main li:nth-child(3) {

  padding-top: 2.5vw;

}

.join-after .main li:nth-child(4) {

  padding-top: 7.5vw;

}

.join-after .main li .box {

  padding: 3vw 2vw 0;

  background: #313131;

  border-bottom: 15px solid #296ebc;

  text-align: left;

}

.join-after .main li h4 {

  height: 50px;

  color: #296ebc;

  font-size: 20px;

  border-bottom: 1px solid #626262;

}

.join-after .main li .con {

  height: 250px;

  padding-top: 1.2vw;

  overflow: hidden;

}

.join-after .main li .con p {

  line-height: 22px;

  color: #fff;

  font-size: 14px;

}

.join-after .tel {

  margin-top: 30px;

  text-align: center;

  color: #fff;

  font-size: 28px;

}

.join-form .t2 p {

  height: 55px;

  color: #296ebc;

}

.join-form .main {

  width: 50%;

}

.join-form .main input {

  width: 100%;

  line-height: 48px;

  padding-left: 20px;

  font-size: 14px;

  border: 1px solid #296ebc;

}

.join-form .main textarea {

  width: 100%;

  height: 160px;

  padding: 20px;

  margin-top: 20px;

  border: 1px solid #296ebc;

}

.join-form .main .sub {

  display: block;

  width: 150px;

  line-height: 50px;

  text-align: center;

  margin-top: 4vw;

  background: #296ebc;

}

.solution .title {

  text-align: center;

  margin-bottom: 80px;

}

.solution .title h3 {

  font-size: 40px;

  font-weight: 700;

  height: 70px;

  position: relative;

}

.solution .title h3:after {

  content: '';

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 30px;

  margin-left: -15px;

  border-bottom: 2px solid #296ebc;

}

.solution .title p {

  font-size: 18px;

  margin-top: 30px;

}

.solution .main li {

  height: 400px;

  margin-bottom: 5.5vw;

}

.solution .main li .img {

  height: 100%;

}

.solution .main li .img img {

  height: 100%;

}

.solution .main li .txt {

  height: 100%;

  padding: 0 4vw;

}

.solution .main li .txt h4 {

  padding-bottom: 1vw;

  color: #296ebc;

  font-size: 26px;

}

.solution .main li .txt .con {

  max-height: 300px;

  overflow: hidden;

  color: #666;

  font-size: 16px;

  line-height: 30px;

}

.solution .main li .txt .more {

  display: block;

  width: 150px;

  line-height: 45px;

  margin-top: 15px;

  text-align: center;

  background: #296ebc;

}


.solution .main li .txt1{

  height: 100%;

  padding: 0 4vw;

}

.solution .main li .txt1 h4 {

  padding-bottom: 1vw;

  color: #296ebc;

  font-size: 26px;

}

.solution .main li .txt1 .con {

  max-height: 300px;

  overflow: hidden;

  color: #666;

  font-size: 16px;

  line-height: 30px;

}

.solution .main li .txt1 .more {

  display: block;

  width: 150px;

  line-height: 45px;

  margin-top: 15px;

  text-align: center;

  background: #296ebc;

}

.service-after .main {

  margin-top: 30px;

}

.service-after .main li .box {

  padding: 3.75vw 1.5vw 0;

  background: #fff;

  position: relative;

  text-align: left;

}

.service-after .main li .box span {

  position: absolute;

  left: 30px;

  top: 0;

  transform: translateY(-50%);

  display: block;

  width: 76px;

  height: 76px;

  line-height: 76px;

  text-align: center;

  color: #fff;

  font-size: 24px;

  background: #296ebc;

  border-radius: 50%;

}

.service-after .main li h5 {

  height: 45px;

  color: #296ebc;

  font-size: 18px;

}

.service-after .main li h4 {

  height: 55px;

  margin-bottom: 20px;

  font-size: 24px;

  position: relative;

}

.service-after .main li h4:after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 30px;

  border-bottom: 3px solid #296ebc;

}

.service-after .main li .con {

  height: 200px;

  overflow: hidden;

}

.service-after .main li .con p {

  overflow: hidden;

  line-height: 32px;

  font-size: 14px;

}

.service-form .main img {

  width: 100%;

  margin-bottom: 30px;

}

.service-form .main input {

  width: 100%;

  line-height: 50px;

  padding: 0 20px;

  background: #eee;

}

.service-form .main textarea {

  width: 100%;

  height: 190px;

  padding: 25px 20px;

  margin-top: 20px;

  background: #eee;

}

.service-form .main .sub {

  display: block;

  width: 160px;

  line-height: 50px;

  margin: 3.25vw auto 0;

  text-align: center;

  background: #296ebc;

}

.service-nav {

  margin-top: 1vw;

  margin-bottom: 2.5vw;

  text-align: center;

}

.service-nav a {

  display: inline-block;

  margin: 0 15px;

  width: 100px;

  line-height: 40px;

}

.service-nav a.active {

  background: #296ebc;

}

.video .main li .img {

  padding-bottom: 65%;

  position: relative;

}

.video .main li .img span {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: url(../images/icon_play01.png) center no-repeat;

  background-color: rgba(0,0,0,0.2);

}

.video .main li h4 {

  line-height: 55px;

  margin-bottom: 20px;

  font-size: 14px;

}

.down .main {

  margin-bottom: 60px;

}

.down .main li .box {

  height: 56px;

  line-height: 56px;

  text-align: left;

  border-bottom: 1px solid #ddd;

}

.down .main li h4 {

  font-size: 14px;

}

.faq .main li {

  padding-top: 24px;

}

.faq .main li h4 {

  height: 34px;

  line-height: 34px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 18px;

}

.faq .main li h4 span {

  display: inline-block;

  width: 34px;

  height: 34px;

  color: #333;

  text-align: center;

  background: #296ebc;

  border-radius: 50%;

  margin-right: 10px;

}

.faq .main li p {

  margin-top: 10px;

  height: 50px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  line-height: 1;

  font-size: 14px;

  padding-top: 14px;

  border-bottom: 1px dashed #dcdcdc;

}

.news-detail {

  padding-bottom: 50px;

}

.news-detail .main {

  width: calc(100% - 340px);

}

.news-detail .main img {

  max-width: 100%;

}

.news-detail .title {

  text-align: center;

}

.news-detail .title h3 {

  line-height: 42px;

  padding-bottom: 10px;

  font-size: 30px;

}

.news-detail .title p {

  height: 60px;

  color: #666;

  font-size: 14px;

}

.news-detail .content {

  padding: 70px 80px;

  background: #fff;

}

.news-detail .content .con {

  min-height: 100px;

  line-height: 30px;

  margin-bottom: 60px;

}

.news-detail .content .con img {

  max-width: 100%;

}

.news-detail .more {

  height: 110px;

  padding: 20px;

  margin-top: 35px;

  background: #fff;

  position: relative;

}

.news-detail .more p {

  line-height: 35px;

}

.news-detail .more p a {

  display: inline-block;

  color: #666;

  font-size: 16px;

  transition: all .3s;

}

.news-detail .more p a:hover {

  color: #296ebc;

}

.news-detail .more p {

  display: block;

}

.news-detail .more .back {

  display: block;

  position: absolute;

  top: 50%;

  right: 20px;

  width: 150px;

  line-height: 45px;

  margin-top: -23px;

  text-align: center;

  background: #296ebc;

  border-radius: 5px;

}

.news-detail .side {

  width: 320px;

}

.news-detail .latest {

  padding: 40px 30px;

  margin-bottom: 20px;

  background: #fff;

}

.news-detail .latest h5 {

  font-size: 20px;

}

.news-detail .latest li {

  padding-top: 30px;

  padding-bottom: 15px;

  color: #666;

  font-size: 15px;

  border-bottom: 1px dashed #e5e5e5;

}

.news-detail .latest h6 {

  margin-bottom: 10px;

  transition: all .3s;

}

.news-detail .latest li:hover h6 {

  color: #296ebc;

}

.news-detail .latest p span {

  color: #296ebc;

}

.news-detail .pro {

  margin-top: 35px;

}

.news-detail .pro h5 {

  height: 30px;

  padding-left: 20px;

  font-size: 20px;

}

.news-detail .pro li .img {

  background: #fff;

  text-align: center;

}

.news-detail .pro li img {

  max-width: 100%;

}

.news-detail .pro li h6 {

  line-height: 55px;

  font-size: 14px;

  text-align: center;

  transition: all .3s;

}

.news-detail .pro li:hover h6 {

  color: #296ebc;

}

.page-nav {

  margin-bottom: -30px;

}

.page-nav .w {

  height: 110px;

  text-align: center;

  position: relative;

  top: -30px;

  background-color: #fff;

  transition: all .3s;

}

.page-nav ul {

  position: absolute;

  left: 0;

  top: 50%;

  width: 100%;

  transform: translateY(-50%);

  font-size: 0;

  line-height: 1.5;

  font-size: 0;

}

.page-nav li {

  display: inline-block;

  margin-right: 0.4vw;

  position: relative;

  z-index: 1;

}

.page-nav li:last-of-type {

  margin-right: 0;

}

.page-nav li a {

  display: block;

  width: 100%;

  min-width: 200px;

  height: 40px;

  color: #666;

  line-height: 40px;

  font-size: 16px;

  padding: 0 0.4vw;

  border: 1px solid #fff;

  border-radius: 40px;

  transition: all .3s;

}

.page-nav li:hover a,

.page-nav li.active a {

  color: #296ebc;

  border: 1px solid #296ebc;

  border-radius: 40px;

}

.page-nav li:hover a {

  color: #fff;

  background: #296ebc;

}

.pro-detail {

  width: calc(100% - 250px);

}

.pro-detail .top .img.fl {

  width: 50%;

  overflow: hidden;

}

.pro-detail .top .txt {

  width: 50%;

}

.pro-detail .top {

  padding: 25px;

  background-color: #fff;

}

.pro-detail .top .big li {

  text-align: center;

  background-color: #fff;

}

.pro-detail .top .big li .box {

  height: 360px;

  line-height: 360px;

  overflow: hidden;

  text-align: center;

}

.pro-detail .top .big li .box img {

  max-width: 100%;

  max-height: 100%;

}

.pro-detail .top .list {

  position: relative;

  padding: 0 40px;

  margin-top: 10px;

  text-align: center;

}

.pro-detail .top .list li {

  border: 1px solid transparent;

}

.pro-detail .top .list li img {

  width: 100%;

}

.pro-detail .top .list .swiper-slide-thumb-active {

  border-color: #296ebc;

}

.pro-detail .top .txt {

  padding-top: 20px;

  padding-left: 2vw;

}

.pro-detail .top .title h4 {

  height: 52px;

  color: #1e242b;

  font-size: 24px;

  border-bottom: 1px solid #ddd;

}

.pro-detail .top .txt .con {

  min-height: 100px;

  padding: 20px 1.5vw;

  color: #999;

  font-size: 14px;

  line-height: 35px;

}

.pro-detail .top .more a {

  display: inline-block;

  padding: 11px 30px;

  margin-right: 1vw;

  color: #fff;

  font-size: 18px;

  background-color: #296ebc;

  border-radius: 40px;

  vertical-align: middle;

}

.pro-detail .top .more span {

  display: inline-block;

  padding-left: 35px;

  color: #296ebc;

  font-size: 24px;

  vertical-align: middle;

  background: url(../images/icon_phone01.png) left center no-repeat;

}

.pro-detail .swiper-button-next,

.pro-detail .swiper-button-prev {

  width: 30px;

  height: 50px;

  background: #a3a3a3;

  z-index: 99999;

  left: 0;

  margin-top: -25px;

}

.pro-detail .swiper-button-next {

  left: auto;

  right: 0;

}

.pro-detail .swiper-button-next:after,

.pro-detail .swiper-button-prev:after {

  content: "";

  position: absolute;

  left: 45%;

  top: 50%;

  width: 10px;

  height: 10px;

  border: 3px solid #fff;

  border-left: none;

  border-bottom: none;

  transform: translate(-50%,-50%) rotate(45deg);

}

.pro-detail .swiper-button-prev:after {

  left: 55%;

  transform: translate(-50%,-50%) rotate(-135deg);

}

.pro-detail .swiper-button-next:hover,

.pro-detail .swiper-button-prev:hover {

  background-color: #296ebc;

}

.pro-detail .swiper-button-next:hover:after,

.pro-detail .swiper-button-prev:hover:after {

  border-color: #fff;

}

.pro-content {

  float: left;

  width: 100%;

  padding: 40px;

  margin-top: 40px;

  background-color: #fff;

}

.pro-content table tr:nth-child(2n) {

  background: rgba(176,196,222,.2);

}

.pro-content table td {

  border: 1px solid #ddd;

  line-height: 2.5;

}

.pro-content .pc-title {

  height: 30px;

  border-bottom: 1px solid #ddd;

}

.pro-content .pc-title h4 {

  display: inline-block;

  height: 100%;

  padding: 0 5px;

  margin: 0 8px;

  padding-bottom: 10px;

  margin-bottom: -1px;

  color: #1e242b;

  font-size: 16px;

  position: relative;

  overflow: hidden;

}

.pro-content .pc-title h4:after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 5px;

  background-color: #296ebc;

  transition: all .3s;

  opacity: .8;

  display: none;

}

.pro-content .pc-title h4.active:after {

  display: block;

}

.pro-content .con {

  display: none;

  line-height: 1.5;

}

.pro-content .con.case .img {

   height: auto;

   line-height: 1;

}

.pro-content .con.active {

  display: block;

  padding: 3vw 2vw;

}

.pro-content img {

  max-width: 100%;

}

.pro-related .nav {

  width: 65%;

  height: 70px;

}

.pro-related .nav a {

  color: #1e242b;

  font-size: 28px;

}

.pro-related li a {

  display: block;

  transition: all .3s;

}

.pro-related li:hover a {

  transform: translateY(-5px);

}

.pro-related .img {

  height: 240px;

  line-height: 240px;

  text-align: center;

  overflow: hidden;

  background: #fff;

}

.pro-related .img img {

  max-width: 100%;

  max-height: 100%;

  transition: all .3s;

}

.pro-related li:hover .img img {

  transform: scale(1.02);

}

.pro-related h4 {

  height: 60px;

  line-height: 60px;

  overflow: hidden;

  color: #1e242b;

  font-size: 18px;

}

.pro-related li:hover h4 {

  color: #296ebc;

}

.case-detail {

  background-color: #f4f4f4;

}

.case-detail .box {

  height: 430px;

}

.case-detail .img img {

  height: 100%;

  max-width: none;

  max-height: none;

}

.case-detail .txt {

  padding-left: 6vw;

  color: #333;

}

.about-story .main li {

  height: 710px;

  margin-bottom: 60px;

}

.about-story .main li .img {

  width: calc(50% - 3vw);

  margin-left: 3vw;

}

.about-story .main li:nth-child(2n) .img {

  margin-left: 0;

  margin-right: 3vw;

}

.about-story .main li .txt .box {

  padding-right: 3vw;

}

.about-story .main li .txt h5 {

  padding-bottom: 20px;

  color: #296ebc;

  font-size: 28px;

}

.about-story .main li .txt h4 {

  height: 70px;

  margin-bottom: 40px;

  font-size: 28px;

  position: relative;

}

.about-story .main li .txt h4:after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 30px;

  border-bottom: 3px solid #296ebc;

}

.about-story .main li .txt .con p {

  line-height: 28px;

  color: #666;

  font-size: 14px;

}

.about-story .main li:nth-child(2n) .txt .box {

  padding-right: 0;

  padding-left: 3vw;

}

.about .top li.row {

  height: 1130px;

}

.about .top li.row .img {

  padding-left: 2.5vw;

}

.about .top li.row:nth-child(2n) .img {

  padding-left: 0;

  padding-right: 2.5vw;

}

.about .top li.row .txt {

  padding-right: 2.5vw;

}

.about .top li.row .txt .box {

  height: 100%;

}

.about .top li.row .txt h4 {

  padding: 1.5vw 0;

  font-size: 36px;
   ;

}

.about .top li.row .txt h5 {

  height: 50px;

  color: #666;

  font-size: 16px;

}

.about .top li.row .txt .con {

  line-height: 30px;

}

.about .top li.row:nth-child(2n) .txt {

  padding-right: 0;

  padding-left: 2.5vw;

}

.about .main li.row {

  height: 370px;

  margin-bottom: 20px;

}

.about .main li.row .img {

  padding-left: 2.5vw;

}

.about .main li.row:nth-child(2n - 1) .img {

  padding-left: 0;

  padding-right: 2.5vw;

}

.about .main li.row .txt {

  padding-right: 2.5vw;

}

.about .main li.row .txt .box {

  height: 100%;

}

.about .main li.row .txt h4 {

  padding-bottom: 1.5vw;

  font-size: 28px;

}

.about .main li.row .txt h5 {

  height: 90px;

  line-height: 30px;

  overflow: hidden;

  font-size: 14px;

}

.about .main li.row .txt li {

  display: inline-block;

  margin-right: 4.5vw;

  text-align: center;

}

.about .main li.row .txt li h6 {

  height: 48px;

  color: #296ebc;

  font-size: 38px;

}

.about .main li.row .txt li span {

  font-size: 14px;

}

.about .main li.row:nth-child(2n -1) .txt {

  padding-right: 0;

  padding-left: 2.5vw;

}

.about .main li.row:nth-child(2n -1) .txt1 {

  padding-right: 0;

  padding-left: 2.5vw;

}

.about-culture .main .row {

  height: 290px;

  margin-bottom: 30px;

}

.about-culture .main .row .txt1 {

  padding-left: 5vw;

}

.about-culture .main .row .txt1 .box {

  height: 100%;

}

.about-culture .main .row {

  height: 290px;

  margin-bottom: 30px;

}

.about-culture .main .row .txt {

  padding-left: 5vw;

}

.about-culture .main .row .txt .box {

  height: 100%;

}

.about-culture .main .row h5 {

  height: 55px;

  color: #296ebc;

  font-size: 28px;

}

.about-culture .main .row h4 {

  height: 55px;

  margin-bottom: 20px;

  font-size: 24px;

  position: relative;

}

.about-culture .main .row h4:after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 30px;

  border-bottom: 3px solid #e5e5e5;

}

.about-culture .main .row .con {

  font-size: 16px;

  line-height: 25px;

}

.about-honor .main li .img {

  height: 250px;

  line-height: 250px;

  border: 1px solid #d2d2d2;

}

.about-honor .main li .img img {

  max-width: 90%;

  max-height: 90%;

}

.about-honor .main li h4 {

  color: #292b3e;

  height: 55px;

  line-height: 55px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  margin-bottom: 20px;

}

.about-honor .more {

  display: block;

  width: 150px;

  line-height: 45px;

  margin: 60px auto 0;

  text-align: center;

  background: #296ebc;

}

.about-cert .main li {

  margin-bottom: 20px;

}

.about-cert .main li .img {

  height: 340px;

  line-height: 340px;

  border: 1px solid #d2d2d2;

}

.about-cert .main li .img img {

  max-width: 90%;

  max-height: 90%;

}

.about-cert .more {

  display: block;

  width: 150px;

  line-height: 45px;

  margin: 60px auto 0;

  text-align: center;

  background: #296ebc;

}

.about-history li {

  padding: 30px 0;

  position: relative;

  overflow: hidden;

}

.about-history li:before,

.about-history li:after {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  height: 100%;

  transform: translate(-50%,-50%);

  border-left: 1px solid #ddd;

}

.about-history li:after {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background-color: #aaa;

  border: none;

}

.about-history li:hover:after {

  background-color: #0096ff;

}

.about-history li .time {

  float: left;

  width: 50%;

  height: 100%;

  padding: 0 2.5vw;

  font-size: 42px;

  font-weight: 700;

  line-height: 35px;

  text-align: right;

  position: absolute;

  top: 0;

}

.about-history li .time span {

  position: absolute;

  top: 50%;

  right: 2.5vw;

  transform: translateY(-50%);

}

.about-history li:nth-child(2n) .time span {

  right: auto;

  left: 2.5vw;

}

.about-history li .txt {

  float: right;

  width: 50%;

  padding: 0 2.5vw;

  color: #7c7c7c;

  font-size: 18px;

  line-height: 35px;

  text-align: left;

}

.about-history li:nth-child(2n) .time {

  float: right;

  text-align: left;

  right: 0;

}

.about-history li:nth-child(2n) .time span {

  right: auto;

  left: 2.5vw;

}

.about-history li:nth-child(2n) .txt {

  float: left;

  text-align: right;

}

.about-photo li.col {

  margin-bottom: 30px;

}

.about-photo li .img {

  height: 0;

  padding-bottom: 63%;

  position: relative;

}

.about-photo li img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}

.about-photo li h4 {

  height: 70px;

  line-height: 70px;

  text-align: center;

  color: #1e242b;

  font-size: 18px;

  background-color: #fff;

}

.about-swiper .main {

  position: relative;

}

.about-swiper .swiper-button-next,

.about-swiper .swiper-button-prev {

  left: -60px;

  width: 36px;

  height: 36px;

  background: none;

  border: 3px solid #dee3ef;

}

.about-swiper .swiper-button-next:hover,

.about-swiper .swiper-button-prev:hover {

  background: #296ebc;

  border-color: #296ebc;

}

.about-swiper .swiper-button-next {

  left: auto;

  right: -60px;

}

.about-swiper .swiper-button-next:after,

.about-swiper .swiper-button-prev:after {

  width: 6px;

  height: 6px;

  border-color: #576077;

}

.about-swiper .swiper-button-next:hover:after,

.about-swiper .swiper-button-prev:hover:after {

  border-color: #fff;

}

.com-pages {

  margin-top: 60px;

  text-align: center;

  font-size: 0;

}

.com-pages span,

.com-pages a {

  display: inline-block;

  width: 55px;

  height: 40px;

  line-height: 40px;

  margin: 0 5px;

  font-size: 14px;

  font-weight: 700;

  background: #d6d6d6;

  transition: all .3s;

  vertical-align: middle;

}

.com-pages a:first-of-type,

.com-pages a:last-of-type {

  width: 85px;

  color: #fff;

  background: #333;

}

/* .com-pages a:first-of-type:before,

.com-pages a:last-of-type:before {

  content: '上一页';

  display: block;

  width: 100%;

  height: 100%;

}

.com-pages a:last-of-type:before {

  content: '下一页';

} */

.com-pages a.cur_page,.com-pages a:hover {

  color: #fff;

  background-color: #296ebc;

}

.com-pages span {

  color: #fff;

  background: #296ebc;

}

.com-pages label {

  display: none;

}

.news-nav .box {

  padding: 0 6vw;

}

.news-nav a {

  margin: 0 2.5vw;

}

.news li.col {

  text-align: left;

  margin-top: 30px;

}

.news li .img {

  height: 0;

  padding-bottom: 62%;

  position: relative;

}

.news li img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}

.news li .txt {

  height: 220px;

  padding: 25px 20px 0;

  overflow: hidden;

  background: #fff;

}

.news li h4 {

  height: 22px;

  line-height: 1;

  color: #1e242b;

  font-size: 20px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.news li span {

  display: block;

  color: #999;

  font-size: 14px;

  line-height: 50px;

}

.news li .con {

  height: 100px;

  overflow: hidden;

  color: #999;

  font-size: 14px;

  line-height: 25px;

}

.contact .main {

  padding-left: 4vw;

  padding-top: 1.25vw;

  background-color: #fff;

}

.contact .main li.col {

  padding-top: 40px;

  padding-bottom: 40px;

  text-align: left;

  overflow: hidden;

  border-bottom: 1px solid #e7e7e7;

}

.contact .main li:nth-child(n + 4) {

  border: none;

}

.contact .main li .img {

  float: left;

  height: 65px;

  width: 80px;

}

.contact .main li .txt {

  float: left;

  width: calc(100% - 80px);

}

.contact .main li h5 {

  height: 30px;

  color: #555;

  font-size: 16px;

}

.contact .main li p {

  color: #1e242b;

  font-size: 25px;

}

.contact .map {

  margin-top: 40px;

}

#map {

  width: 100%;

  height: 520px;

}

#map td {

  box-sizing: content-box;

}

#map img {

  max-width: none;

  max-height: none;

}

.BMapLib_SearchInfoWindow .BMapLib_bubble_center {

  line-height: 1.5;

}

.map h5 {

  padding-left: 40px;

  line-height: 75px;

  color: #262626;

  font-size: 18px;

  background-color: #fff;

}

.map h5 img {

  margin-right: 15px;

}

.contact-all .main .row {

  height: 400px;

}

.contact-all .main .row .img {

  width: calc(50% + 3vw);

}

.contact-all .main .row .txt {

  width: calc(50% - 3vw);

  padding-left: 3vw;

}

.contact-all .main .row .txt .box {

  height: 100%;

}

.contact-all .main .row h4 {

  height: 3.5vw;

  margin-bottom: 2vw;

  font-size: 32px;

  border-bottom: 1px dashed #b5b5b5;

}

.contact-all .main .row .con p {

  color: #666;

  line-height: 34px;

}

.contact-message .main .txt {

  width: calc(50% - 5vw);

  padding-right: 2.5vw;

}

.contact-message .main .img {

  width: calc(50% + 5vw);

  height: 420px;

}

.contact-message .main li {

  margin-bottom: 20px;

}

.contact-message .main input {

  width: 100%;

  line-height: 60px;

  padding-left: 30px;

  padding-right: 15px;

  border: 1px solid #d2d2d2;

}

.contact-message .main textarea {

  width: 100%;

  height: 180px;

  padding: 25px 15px;

  border: 1px solid #d2d2d2;

}

.contact-message .main .sub {

  display: block;

  width: 150px;

  line-height: 40px;

  margin-top: 35px;

  text-align: center;

  background-color: #296ebc;

}

#map {

  width: 100%;

  height: 510px;

}

.job .main li {

  overflow: hidden;

  background: #fff;

}

.job .main li:nth-child(2n - 1) {

  background-color: #f4f4f4;

}

.job .main li:nth-child(1) {

  border-top: 1px solid #dcdcdc;

}

.job .main li .tit p {

  line-height: 70px;

}

.job .main li:nth-child(1) .tit p {

  color: #666;

  line-height: 65px;

  background: #eee;

}

.job .main li .tit {

  color: #666;

  font-size: 18px;

  position: relative;

  cursor: pointer;

}

.job .main li.active .tit,

.job .main li .tit:hover {

  color: #fff;

  background: #296ebc;

}

.job .main li .tit span:after {

  content: '+';

  position: absolute;

  right: 8vw;

  top: 50%;

  transform: translateY(-50%);

}

.job .main li.active .tit span:after {

  content: '-';

  color: #fff;

}

.job .main li .con {

  display: none;

  padding: 4vw 7.5vw;

  background: #fff;

}

.job .main li .con p {

  color: #666;

  font-size: 16px;

  line-height: 25px;

}

.related-title {

  text-align: center;

}

.related-title h3 {

  height: 50px;

  font-size: 28px;

}

.related-title h4 {

  height: 60px;

  color: #666;

  font-size: 14px;

}

.related .main {

  width: 100%;

  position: relative;

}

.related .swiper-button-next,

.related .swiper-button-prev {

  left: -50px;

  width: 40px;

  height: 40px;

  background: #999;

}

.related .swiper-button-next:hover,

.related .swiper-button-prev:hover {

  background: #296ebc;

}

.related .swiper-button-next {

  left: auto;

  right: -50px;

}

.related .swiper-button-next:after,

.related .swiper-button-prev:after {

  width: 6px;

  height: 6px;

  border-color: #fff;

}

.pro-related li {

  text-align: center;

  margin-top: 0 !important;

}

.case-related .txt {

  background: #fff;

}

.links {

  padding-bottom: 30px;

  line-height: 2;

  color: #687281;

  font-size: 14px;

}

.links a {

  margin-right: 1vw;

  color: #687281;

  font-size: 14px;

}

.links a:hover {

  color: #296ebc;

  text-decoration: underline;

}

.footer {

  padding-top: 60px;

  color: #8793a5;

  font-size: 14px;

  background-color: #2d343f;

}

.footer.index {

  padding-top: 70px;

}

.footer dl {

  float: left;

  margin-right: 6vw;

  margin-bottom: 30px;

  text-align: left;

}

.footer dl:last-child {

  margin-right: 0;

}

.footer dt {

  height: 55px;

  color: #b2c0d7;

  font-size: 18px;

  position: relative;

}

.footer dd a {

  display: block;

  height: 35px;

}

.footer .phone h4 {

  height: 45px;

  color: #b2c0d7;

}

.footer .phone h5 {

  height: 40px;

  color: #296ebc;

  font-size: 28px;

}

.footer .phone .more {

  display: block;

  width: 160px;

  line-height: 35px;

  border-radius: 35px;

  margin-top: 10px;

  text-align: center;

  color: #fff;

  border: 1px solid #fff;

}

.footer .qr {

  margin-left: 3vw;

}

.footer .qr img {

  width: 120px;

  height: 120px;

  padding: 5px;

  background: #fff;

}

.footer .qr p {

  margin-top: 15px;

  color: #677284;

  font-size: 14px;

  text-align: center;

}

.footer .copy ,.footera .copy{

  line-height: 32px;
  padding-top:20px;

  color: #687281;

}

.footera .copy span,

.footera .copy a {

  display: inline;



}

.footera a {

  transition: all .3s;

}

.footera a:hover {

  color: #296ebc;

  transform: translateX(4px);

  opacity: 1;

}

.hor-top-show {

  position: absolute;

  bottom: -40px;

  opacity: 0;

  left: 0;

  top: 0;

  overflow: hidden;

  transition: all .3s;

  z-index: 1;

}

.hor-top-show.active {

  position: relative;

  opacity: 1;

  bottom: 0;

  z-index: 2;

}

.hvr1.hvr1 .img {

  background: #000;

  position: relative;

}

.hvr1.hvr1 .img img {

  transition: all .5s;

}

.hvr1.hvr1 .img:before {

  content: '';

  position: absolute;

  top: 35px;

  bottom: 35px;

  left: 20px;

  right: 20px;

  border-top: 1px solid #fff;

  border-bottom: 1px solid #fff;

  transform: scaleX(0);

  transition: all .5s;

  z-index: 1;

}

.hvr1.hvr1 .img:after {

  content: '';

  position: absolute;

  top: 20px;

  bottom: 20px;

  left: 35px;

  right: 35px;

  border-left: 1px solid #fff;

  border-right: 1px solid #fff;

  transform: scaleY(0);

  transition: all .5s;

  z-index: 1;

}

.hvr1.hvr1:hover img {

  opacity: .8;

}

.hvr1.hvr1:hover .img:before {

  transform: scaleX(1);

}

.hvr1.hvr1:hover .img:after {

  transform: scaleY(1);

}

.hover-img-big .img {

  overflow: hidden;

}

.hover-img-big .img img {

  transition: transform .5s;

}

.hover-img-big:hover img {

  transform: scale(1.04);

}

.hover-color.hover-color h4 {

  transition: all .3s;

}

.hover-color.hover-color:hover h4 {

  color: #296ebc;

}

.hover-left-rotate {

  transition: transform .3s;

}

.hover-left-rotate:hover {

  transform: rotateY(360deg);

}

.hover-left-move {

  position: relative;

  right: 0;

  transition: all .3s;

}

.hover-left-move:hover {

  right: -4px;

}

.hover-top-move {

  display: inline-block;

  position: relative;

  transition: transform .3s;

}

.hover-top-move:hover {

  transform: translateY(-5px);

}

.hover-bg-big {

  position: relative;

  z-index: 1;

}

.hover-bg-big:after {

  content: "";

  background-color: #fff;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  transform: scale(0);

  transition: transform .3s;

  z-index: -1;

}

.hover-bg-big:hover:after {

  transform: scale(1);

}

.hvr-bg-move {

  position: relative;

  overflow: hidden;

  transition: all .5s;

}

.hvr-bg-move:hover {

  box-shadow: 0 0 5px #fff inset;

}

.hvr-bg-move:after {

  content: '';

  position: absolute;

  left: -100%;

  top: 0;

  width: 0;

  height: 100%;

  background-color: #fff;

  opacity: .5;

  box-shadow: 0 0 30px #fff;

}

.hvr-bg-move:hover:after {

  left: 100%;

  width: 50%;

  transition: all .5s;

}

.hvr-bg-move2 {

  position: relative;

  overflow: hidden;

  z-index: 1;

  transition: all .3s;

}

.hvr-bg-move2:hover {

  box-shadow: 0 0 5px #fff inset;

}

.hvr-bg-move2:after {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  width: 300px;

  height: 300px;

  margin-top: -150px;

  margin-left: -150px;

  border-radius: 50%;

  background: #fff;

  transform: scale(0);

  transition: all .3s;

  z-index: -1;

}

.hvr-bg-move2:hover:after {

  animation: bg_big 1s;

}

@keyframes bg_big {

  0% {

    opacity: .6;

  }

  100% {

    opacity: 0;

    transform: scale(1);

  }

}

.flash {

  overflow: hidden;

  width: 380px;

  height: 230px;

  position: relative;

}

.flash em {

  cursor: pointer;

  height: 230px;

  width: 380px;

  left: -380px;

  position: absolute;

  top: 0;

  transform: skewX(-25deg);

  transition: all 0s;

  background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

  background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

  background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

  background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

}

.flash:hover em {

  left: 380px;

  transition: all 0.7s;

}

.flip img {

  width: 380px;

  height: 230px;

  position: absolute;

  left: 0;

  top: 0;

  z-index: 2;

  transform: rotateY(0deg);

  transition: all 0.6s ease 0s;

  backface-visibility: hidden;

}

.flip span {

  position: absolute;

  width: 380px;

  height: 230px;

  background: #e1e1e1;

  line-height: 230px;

  text-align: center;

  transform: rotateY(-180deg);

  transition: all 0.5s ease 0s;

  backface-visibility: hidden;

  left: 0;

  top: 0;

}

.flip:hover img {

  transform: rotateY(180deg);

}

.flip:hover span {

  transform: rotateY(0deg);

}

.up span {

  height: 40px;

  bottom: -40px;

  display: block;

  background: #333;

  transition: all 0.5s;

  line-height: 40px;

  color: #fff;

}

.up:hover img {

  margin-top: -40px;

  transition: all 0.5s;

}

.panorama {

  background-image: url(../images/6608185829213862083.jpg);

  background-size: auto 100%;

  cursor: pointer;

  animation: panorama 10s linear infinite alternate;

  animation-play-state: paused;

}

.panorama:hover,

.panorama:focus {

  animation-play-state: running;

}

@keyframes panorama {

  to {

    background-position: 100% 0;

  }

}

.border .txt {

  position: absolute;

  top: 10px;

  left: 10px;

  right: 10px;

  bottom: 10px;

  color: #fff;

  line-height: 230px;

  transform: scale(0);

}

.border .txt:before,

.border .txt:after {

  position: absolute;

  content: '';

  opacity: 0;

  transition: all 0.5s;

  transition-delay: .3s;

}

.border .txt:before {

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border-top: 1px solid #fff;

  border-bottom: 1px solid #fff;

  transform: scale(0,1);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}

.border .txt:after {

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border-right: 1px solid #fff;

  border-left: 1px solid #fff;

  transform: scale(1,0);

  transform-origin: 100% 0;

}

.border:hover .txt:before,

.border:hover .txt:after {

  opacity: 1;

  transform: scale(1);

  transition: all 0.5s;

}

.border:hover .txt {

  transform: scale(1);

}

.border:hover img {

  opacity: .5;

}

.border2 .txt {

  position: absolute;

  top: 20px;

  left: 20px;

  right: 20px;

  bottom: 20px;

  color: #fff;

  line-height: 230px;

  transform: scale(0);

}

.border2 .txt:before,

.border2 .txt:after {

  position: absolute;

  content: '';

  opacity: 0;

  transition: all 0.5s;

  transition-delay: .3s;

}

.border2 .txt:before {

  top: 15px;

  right: 0;

  bottom: 15px;

  left: 0;

  border-top: 1px solid #fff;

  border-bottom: 1px solid #fff;

  transform: scale(0,1);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}

.border2 .txt:after {

  top: 0;

  right: 15px;

  bottom: 0;

  left: 15px;

  border-right: 1px solid #fff;

  border-left: 1px solid #fff;

  transform: scale(1,0);

  transform-origin: 100% 0;

}

.border2:hover .txt:before,

.border2:hover .txt:after {

  opacity: 1;

  transform: scale(1);

  transition: all 0.5s;

}

.border2:hover .txt {

  transform: scale(1);

}

.border2:hover img {

  opacity: .5;

}

.jitter:hover img {

  animation: tada 1s .2s ease both;

}

@keyframes tada {

  0% {

    transform: scale(1);

  }

  10%,

  20% {

    transform: scale(0.9) rotate(-3deg);

  }

  30%,

  50%,

  70%,

  90% {

    transform: scale(1.1) rotate(3deg);

  }

  40%,

  60%,

  80% {

    transform: scale(1.1) rotate(-3deg);

  }

  100% {

    transform: scale(1) rotate(0);

  }

}

.effect1 {

  perspective: 800px;

}

.effect1 .pic {

  display: block;

  transition: 0.4s;

}

.effect1 .txt {

  position: absolute;

  left: 0;

  background: #fff;

  height: 90%;

  width: 80%;

  padding: 5% 10%;

  transition: 0.6s;

  top: -100%;

  transition: all 0.5s;

  z-index: -1;

}

.effect1:hover .pic {

  transform: rotateX(80deg);

  transform-origin: center bottom 0;

}

.effect1:hover .txt {

  top: 0;

}

.effectBtn {

  display: inline-block;

  padding: 5px 25px;

  font-size: 14px;

  color: #fff;

  border: 2px solid #4d92d9;

  background-color: #4d92d9;

  text-decoration: none;

  transition: 0.4s;

}

.text-desc {

  position: absolute;

  left: 0;

  top: 0;

  background-color: #fff;

  height: 100%;

  opacity: 0;

  width: 100%;

  padding: 20px;

}

.effect2 {

  perspective: 500px;

  z-index: 5;

}

.effect2 .txt {

  position: absolute;

  left: 0;

  bottom: 0;

  background: #fff;

  height: 90%;

  width: 80%;

  padding: 5% 10%;

  transition: 0.6s;

  z-index: -1;

  transform: rotateX(80deg);

  transform-origin: center bottom 0;

  opacity: 0;

}

.effect2:hover .txt {

  transform: none;

  opacity: 1;

}

.effect2:hover img {

  transform: translateY(-100%);

}

.effect3 {

  perspective: 500px;

  overflow: visible;

}

.effect3 .txt {

  position: absolute;

  left: 0;

  top: 0;

  background: #fff;

  height: 90%;

  width: 70%;

  padding: 5% 20% 5% 10%;

  transition: 0.6s;

  transform: translateX(-100%);

  opacity: 0;

}

.effect3:hover .txt {

  transform: translateX(0px);

  opacity: 1;

}

.effect3:hover img {

  transform: scale(0.5) translateX(100%);

  position: relative;

  z-index: 9;

}

.effect4 .txt {

  position: absolute;

  left: 0;

  top: 0;

  background: #fff;

  height: 70%;

  width: 80%;

  padding: 25% 10% 5% 10%;

  transition: 0.6s;

  transform: translateY(100%);

  opacity: 0;

}

.effect4:hover .txt {

  transform: translateY(0px);

  opacity: 1;

}

.effect4:hover img {

  transform: scale(0.3) translateY(-100%);

  position: relative;

  z-index: 9;

}

.effect5 .txt {

  position: absolute;

  right: 0;

  top: 0;

  background: #fff;

  height: 90%;

  width: 90%;

  padding: 5%;

  transition: 0.6s;

  opacity: 0;

  transform: perspective(600px) rotateY(-90deg);

  transform-origin: right center 0;

  width: 40%;

}

.effect5 img {

  position: relative;

  right: 0;

}

.effect5:hover .txt {

  opacity: 1;

  transform: perspective(600px) rotateY(0deg);

  z-index: 5;

}

.effect5:hover img {

  right: 50%;

}

.effect6 {

  border: 5px solid #eee;

}

.effect6 .txt {

  position: absolute;

  right: 0;

  top: 0;

  background: #fff;

  width: 70%;

  height: 90%;

  padding: 5% 15%;

  transition: 0.6s;

  transform: scale(0);

  backface-visibility: hidden;

}

.effect6:hover .txt {

  transform: scale(1);

  border-radius: 50% 0 50% 0;

}

.effect6:hover img {

  transform: scale(1.1);

}

.button1 {

  background: #555;

  padding: 50px 0;

  margin-bottom: 50px;

  overflow: hidden;

}

.btn {

  color: #fff;

  cursor: pointer;

  display: inline-block;

  font-size: 16px;

  font-weight: 400;

  line-height: 45px;

  margin: 0 auto 2em;

  max-width: 160px;

  position: relative;

  text-decoration: none;

  text-transform: uppercase;

  vertical-align: middle;

  width: 100%;

  margin: 0 10px;

}

.btn:hover {

  text-decoration: none;

}

.btn1 {

  background: #296ebc;

  font-weight: 100;

}

.btn1 svg {

  height: 45px;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

}

.btn1 rect {

  fill: none;

  stroke: #fff;

  stroke-width: 2;

  stroke-dasharray: 422, 0;

}

.btn1:hover {

  background: #296ebc;

  font-weight: 900;

  letter-spacing: 1px;

}

.btn1:hover rect {

  stroke-width: 5;

  stroke-dasharray: 15, 310;

  stroke-dashoffset: 48;

  -webkit-transition: all 1.35s cubic-bezier(0.19,1,0.22,1);

  transition: all 1.35s cubic-bezier(0.19,1,0.22,1);

}

.btn2 {

  letter-spacing: 0;

}

.btn2:hover,

.btn2:active {

  letter-spacing: 5px;

}

.btn2:after,

.btn2:before {

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  border: 1px solid rgba(255,255,255,0);

  bottom: 0px;

  content: " ";

  display: block;

  margin: 0 auto;

  position: relative;

  -webkit-transition: all 280ms ease-in-out;

  transition: all 280ms ease-in-out;

  width: 0;

}

.btn2:hover:after,

.btn2:hover:before {

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  border-color: #fff;

  -webkit-transition: width 350ms ease-in-out;

  transition: width 350ms ease-in-out;

  width: 70%;

}

.btn2:hover:before {

  bottom: auto;

  top: 0;

  width: 70%;

}

.btn3 {

  background: #296ebc;

  border: 1px solid #da251f;

  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;

  font-weight: 900;

  letter-spacing: 1px;

  -webkit-transition: all 150ms linear;

  transition: all 150ms linear;

}

.btn3:hover {

  background: #296ebc;

  border: 1px solid rgba(0,0,0,0.05);

  box-shadow: 1px 1px 2px rgba(255,255,255,0.2);

  color: #ec817d;

  text-decoration: none;

  text-shadow: -1px -1px 0 #c2211c;

  -webkit-transition: all 250ms linear;

  transition: all 250ms linear;

}

.btn4 {

  border: 1px solid;

  overflow: hidden;

  position: relative;

}

.btn4 span {

  z-index: 20;

}

.btn4:after {

  background: #fff;

  content: "";

  height: 155px;

  left: -75px;

  opacity: .2;

  position: absolute;

  top: -50px;

  -webkit-transform: rotate(35deg);

  -ms-transform: rotate(35deg);

  transform: rotate(35deg);

  -webkit-transition: all 550ms cubic-bezier(0.19,1,0.22,1);

  transition: all 550ms cubic-bezier(0.19,1,0.22,1);

  width: 50px;

  z-index: 10;

}

.btn4:hover:after {

  left: 120%;

  -webkit-transition: all 550ms cubic-bezier(0.19,1,0.22,1);

  transition: all 550ms cubic-bezier(0.19,1,0.22,1);

}

.btn5 {

  border: 0 solid;

  box-shadow: inset 0 0 20px rgba(255,255,255,0);

  outline: 1px solid;

  outline-color: rgba(255,255,255,0.5);

  outline-offset: 0px;

  text-shadow: none;

  -webkit-transition: all 1250ms cubic-bezier(0.19,1,0.22,1);

  transition: all 1250ms cubic-bezier(0.19,1,0.22,1);

}

.btn5:hover {

  border: 1px solid;

  box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.2);

  outline-color: rgba(255,255,255,0);

  outline-offset: 15px;

  text-shadow: 1px 1px 2px #427388;

}

.btn-hvr:before,

.btn-hvr:after {

  z-index: -1;

  box-sizing: border-box;

  transition: 0.5s;

}

.btn-hvr {

  position: relative;

  overflow: hidden;

  z-index: 1;

  transition: all .3s;

}

.btn-hvr0:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 0;

  height: 80px;

  background: #cc1a1b;

}

.btn-hvr0:hover {

  color: #fff;

}

.btn-hvr0:hover:before {

  width: 250px;

}

.btn-hvr1:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: #296ebc transparent transparent transparent;

  position: absolute;

  top: 0;

  left: 0;

}

.btn-hvr1:hover {

  color: #ecdcd4;

}

.btn-hvr1:hover:after {

  border-width: 330px 330px 0 0;

}

.btn-hvr1:active {

  background: #b27254;

}

.btn-hvr1-2 {

  color: #bc4b41;

}

.btn-hvr1-2:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent transparent #6a1a13;

  position: absolute;

  bottom: 0;

  left: 0;

}

.btn-hvr1-2:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent #6a1a13 transparent;

  position: absolute;

  right: 0;

  bottom: 0;

}

.btn-hvr1-2:hover {

  color: #ebcac7;

}

.btn-hvr1-2:hover:before {

  border-width: 206.25px 0 0 206.25px;

}

.btn-hvr1-2:hover:after {

  border-width: 0 0 206.25px 206.25px;

}

.btn-hvr1-2:active {

  background: #b02b20;

}

.btn-hvr2 {

  color: #48a6b1;

}

.btn-hvr2:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent transparent #185a62;

  position: absolute;

  bottom: 0;

  left: 0;

}

.btn-hvr2:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent #185a62 transparent transparent;

  position: absolute;

  top: 0;

  right: 0;

}

.btn-hvr2:hover {

  color: #c9e5e8;

}

.btn-hvr2:hover:before {

  border-width: 165px 0 0 165px;

}

.btn-hvr2:hover:after {

  border-width: 0 165px 165px 0;

}

.btn-hvr2:active {

  background: #2896a3;

}

.btn-hvr3 {

  color: #ad96a0;

}

.btn-hvr3:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent transparent #5f4f56;

  position: absolute;

  bottom: 0;

  left: 0;

}

.btn-hvr3:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent #5f4f56 transparent transparent;

  position: absolute;

  top: 0;

  right: 0;

}

.btn-hvr3 span:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent #5f4f56 transparent;

  position: absolute;

  right: 0;

  bottom: 0;

}

.btn-hvr3 span:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: #5f4f56 transparent transparent transparent;

  position: absolute;

  top: 0;

  left: 0;

}

.btn-hvr3:hover {

  color: #e7e0e3;

}

.btn-hvr3:hover:before {

  border-width: 165px 0 0 165px;

}

.btn-hvr3:hover:after {

  border-width: 0 165px 165px 0;

}

.btn-hvr3:hover span:before {

  border-width: 0 0 165px 165px;

}

.btn-hvr3:hover span:after {

  border-width: 165px 165px 0 0;

}

.btn-hvr3:active {

  background: #9e838f;

}

.btn-hvr4 {

  color: #8d53b3;

}

.btn-hvr4:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent #492064 transparent transparent;

  position: absolute;

  top: 0;

  right: 0;

}

.btn-hvr4:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent transparent #492064;

  position: absolute;

  bottom: 0;

  left: 0;

}

.btn-hvr4:before,

.btn-hvr4:after {

  border-color: #492064;

}

.btn-hvr4 span:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: #492064 transparent transparent transparent;

  position: absolute;

  top: 0;

  left: 0;

}

.btn-hvr4 span:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent #492064 transparent;

  position: absolute;

  right: 0;

  bottom: 0;

}

.btn-hvr4 span:before,

.btn-hvr4 span:after {

  border-color: #492064;

}

.btn-hvr4:hover {

  color: #decde9;

}

.btn-hvr4:hover:before {

  border-width: 20px 62.5px;

}

.btn-hvr4:hover:after {

  border-width: 20px 62.5px;

}

.btn-hvr4:hover span:before {

  border-width: 20px 62.5px;

}

.btn-hvr4:hover span:after {

  border-width: 20px 62.5px;

}

.btn-hvr4:active {

  background: #7935a6;

}

.btn-hvr5 {

  color: #808695;

}

.btn-hvr5:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent #3f444e transparent transparent;

  position: absolute;

  top: 0;

  right: 0;

}

.btn-hvr5:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent transparent #3f444e;

  position: absolute;

  bottom: 0;

  left: 0;

}

.btn-hvr5:hover {

  color: #dadce0;

}

.btn-hvr5:hover:before,

.btn-hvr5:hover:after {

  border-width: 80px 262.5px;

}

.btn-hvr5:active {

  background: #697182;

}

.btn-hvr6 {

  color: #80629f;

}

.btn-hvr6 span {

  position: absolute;

  display: block;

  width: 0;

  height: 0;

  border-radius: 50%;

  background: #402a55;

  -webkit-transform: translate(-50%,-50%);

  transform: translate(-50%,-50%);

  -webkit-transition: width 0.4s, height 0.4s;

  transition: width 0.4s, height 0.4s;

  z-index: -1;

}

.btn-hvr6:hover {

  color: #dad1e3;

}

.btn-hvr6:hover span {

  width: 562.5px;

  height: 562.5px;

}

.btn-hvr6:active {

  background: #6a468e;

}

.btn-hvr7 {

  color: #27692b;

}

.btn-hvr7:before,

.btn-hvr7:after,

.btn-hvr7 span:before,

.btn-hvr7 span:after {

  content: '';

  position: absolute;

  top: 0;

  width: 63.5px;

  height: 0;

  background: #012f04;

}

.btn-hvr7:before {

  left: 0;

}

.btn-hvr7:after {

  left: 125px;

}

.btn-hvr7 span:before,

.btn-hvr7 span:after {

  top: auto;

  bottom: 0;

}

.btn-hvr7 span:before {

  left: 62.5px;

}

.btn-hvr7 span:after {

  left: 187.5px;

}

.btn-hvr7:hover {

  color: #c0d3c1;

}

.btn-hvr7:hover:before,

.btn-hvr7:hover:after,

.btn-hvr7:hover span:before,

.btn-hvr7:hover span:after {

  height: 80px;

}

.btn-hvr7:active {

  background: #014f06;

}

.btn-hvr8 {

  color: #5177a7;

}

.btn-hvr8:before,

.btn-hvr8:after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 250px;

  height: 0;

  background: #296ebc;

}

.btn-hvr8:after {

  top: auto;

  bottom: 0;

}

.btn-hvr8:hover:before,

.btn-hvr8:hover:after {

  height: 40px;

}

.btn-hvr8:active {

  background: #325f98;

}

.btn-hvr9 {

  color: #c93a8e;

}

.btn-hvr9:before,

.btn-hvr9:after,

.btn-hvr9 span:before,

.btn-hvr9 span:after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 250px;

  height: 0;

  background: rgba(115,14,73,0.25);

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

.btn-hvr9:after,

.btn-hvr9 span:before {

  top: auto;

  bottom: 0;

}

.btn-hvr9 span:before,

.btn-hvr9 span:after {

  -webkit-transition-delay: 0.4s;

  transition-delay: 0.4s;

}

.btn-hvr9:hover {

  color: #efc5de;

}

.btn-hvr9:hover:before,

.btn-hvr9:hover:after,

.btn-hvr9:hover span:before,

.btn-hvr9:hover span:after {

  height: 80px;

}

.btn-hvr9:active {

  background: #c0177a;

}

.btn-hvr10 {

  color: #8f5c82;

}

.btn-hvr10:before,

.btn-hvr10:after,

.btn-hvr10 span:before,

.btn-hvr10 span:after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 0;

  height: 80px;

  background: rgba(74,38,65,0.25);

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

.btn-hvr10:after,

.btn-hvr10 span:before {

  left: auto;

  right: 0;

}

.btn-hvr10 span:before,

.btn-hvr10 span:after {

  -webkit-transition-delay: 0.4s;

  transition-delay: 0.4s;

}

.btn-hvr10:hover {

  color: #decfda;

}

.btn-hvr10:hover:before,

.btn-hvr10:hover:after,

.btn-hvr10:hover span:before,

.btn-hvr10:hover span:after {

  width: 250px;

}

.btn-hvr10:active {

  background: #7b3f6c;

}

@-webkit-keyframes criss-cross-left {

  0% {

    left: -20px;

  }

  50% {

    left: 50%;

    width: 20px;

    height: 20px;

  }

  100% {

    left: 50%;

    width: 375px;

    height: 375px;

  }

}

@keyframes criss-cross-left {

  0% {

    left: -20px;

  }

  50% {

    left: 50%;

    width: 20px;

    height: 20px;

  }

  100% {

    left: 50%;

    width: 375px;

    height: 375px;

  }

}

@-webkit-keyframes criss-cross-right {

  0% {

    right: -20px;

  }

  50% {

    right: 50%;

    width: 20px;

    height: 20px;

  }

  100% {

    right: 50%;

    width: 375px;

    height: 375px;

  }

}

@keyframes criss-cross-right {

  0% {

    right: -20px;

  }

  50% {

    right: 50%;

    width: 20px;

    height: 20px;

  }

  100% {

    right: 50%;

    width: 375px;

    height: 375px;

  }

}

.btn-hvr11 {

  position: relative;

  color: #9a7cba;

}

.btn-hvr11:before,

.btn-hvr11:after {

  position: absolute;

  top: 50%;

  content: '';

  width: 20px;

  height: 20px;

  background: #8865ae;

  border-radius: 50%;

}

.btn-hvr11:before {

  left: -20px;

  -webkit-transform: translate(-50%,-50%);

  transform: translate(-50%,-50%);

}

.btn-hvr11:hover:before {

  -webkit-animation: criss-cross-left 0.8s both;

  animation: criss-cross-left 0.8s both;

}

.btn-hvr11:hover:after {

  -webkit-animation: criss-cross-right 0.8s both;

  animation: criss-cross-right 0.8s both;

}

.sea-product ul.mycol {

  margin: 0 -10px;

}

.sea-product li.col {

  padding: 0 10px;

  margin-bottom: 20px;

}

.sea-product li {

  transition: all .3s;

}

.sea-product li:hover {

  transform: translateY(-10px);

}

.sea-product li .img {

  height: 280px;

  line-height: 280px;

  text-align: center;

  position: relative;

}

.sea-product li img {

  max-width: 80%;

  max-height: 80%;

}

.sea-product li h4 {

  height: 50px;

  line-height: 50px;

  color: #1e242b;

  font-size: 18px;

  overflow: hidden;

  text-align: center;

}

@media (max-width: 1700px) {

  .w1600 {

    width: 1400px;

  }

  .header .nav{width: calc(115% - 855px);}

}

@media (max-width: 1650px) {

  .w {

    width: 1200px;

  }

  .w1600 {

    width: 1200px;

  }

  .header .nav li {

    margin-right: 2vw;

  }

  .header .nav li > a {

    font-size: 16px;

  }

}

.header-m{display: none;}

.header-m .nav {

  position: fixed;

  left: 0;

  top: 60px;

  width: 100%;

  bottom: 0;

  background-color: rgba(0,0,0,0.6);

  transform: scaleX(0);

  transform-origin: right;

  transition: all .4s;

  z-index: 999;

}

    @media (max-width: 1480px) {.header .nav {

    width: calc(115% - 836px);

}}

@media (max-width: 1420px) {.header .nav {

    width: calc(119% - 836px);

    }

.header .phone .lang:hover {

    width: 100px;

}

  }

@media (max-width: 1360px) {.header .phone .search{display: none;}

.header .nav {

    width: calc(117% - 713px);}

@media (max-width: 1300px) {



  .header .nav li {

    margin-right: 1.5vw;

  }

}





@media(max-width:1220px){

  .header .nav {

    width: calc(120% - 728px);

    height: 100%;

    text-align: right;

}

}

@media (max-width: 1200px) {

  .zhan{display: inline-block;}



  .index-news .main .left{display: none;}

  * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }

  html {

    font-size: 10px;

    line-height: 1;

  }

  body {

    font-family: Arial, "微软雅黑", sans-serif;

    color: #2d343f;

    font-size: 14px;

    background-color: #fff;

    overflow-x: hidden;

  }

  h1,

  h2,

  h3,

  h4,

  h5,

  h6 {

    line-height: inherit;

    font-size: inherit;

    font-weight: normal;

  }

  i {

    font-style: normal;

  }

  img {

    border: none;

    vertical-align: middle;

  }

  ul,

  ol {

    list-style: none;

  }

  li {

    list-style: inherit;

  }

  input,

  textarea,

  button,

  span,

  li,

  a,

  div {

    border: none;

    outline: none;

    resize: none;

  }

  textarea {

    font-family: Arial, "微软雅黑", sans-serif;

    overflow: auto;

  }

  table {

    width: 100%;

    border-spacing: 0;

    border-collapse: collapse;

  }

  a,

  a:active,

  a:hover,

  a:visited {

    color: inherit;

    font-size: inherit;

    text-decoration: none;

  }

  .fl {

    float: left;

  }

  .fr {

    float: right;

  }

  .clearfix {

    *zoom: 1;

  }

  .clearfix:before,

  .clearfix:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  .mycol {

    margin: 0 -5px;

    *zoom: 1;

  }

  .mycol:before,

  .mycol:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  .mycol .col {

    float: left;

    padding: 0 5px;

    text-align: center;

  }

  .mycol .col img {

    max-width: 100%;

  }

  .mycol2 {

    margin: 0 -6.5vw;

    *zoom: 1;

  }

  .mycol2:before,

  .mycol2:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  .mycol2 .col {

    float: left;

    padding: 0 6.5vw;

    text-align: center;

  }

  .mycol2 .col img {

    max-width: 100%;

  }

  .mycol-2 .col {

    width: 50%;

  }

  .mycol-3 .col {

    width: 33.33333%;

  }

  .mycol-4 .col {

    width: 25%;

  }

  .mycol-5 .col {

    width: 20%;

  }

  .box {

    display: block;

  }

  .center-fa {

    position: relative;

  }

  .center-fa .center {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,50%);

  }

  .center-fa .centerX {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

  }

  .center-fa .centerY {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

  }

  .center-img {

    height: 100%;

    position: relative;

    overflow: hidden;

  }

  .center-img img {

    position: absolute;

    left: 50%;

    top: 50%;

    width: auto;

    max-width: none;

    min-width: 100%;

    height: 100%;

    transform: translate(-50%,-50%);

  }

  .center-img-hover img {

    transition: all .3s;

  }

  .center-img-hover:hover img {

    transform: scale(1.04);
        transition: all .5s;

  }

  .full-img {

    width: 100%;

    height: 0;

    position: relative;

  }

  .full-img img {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

  }

  .lr-ti li {

    overflow: hidden;

  }

  .lr-ti li > div {

    width: 50%;

    height: 100%;

    float: left;

  }
  .lr-ti li > div.img1 {
    width: 100%;
    height: 100%;
    float: left;

  }
.lr-ti li > div.txt1 {
    width: 100%;
    height: 100%;
    float: left;
}
  .lr-ti li > div .box > div {

    width: 100%;

  }

   .lr-ti li > div .box > div.img1 {

    width: 100%;

  }

  .lr-ti li:nth-child(2n) > div {

    float: right;

  }

  .hvr-color {

    transition: all .3s;

  }

  .hvr-color:hover {

    color: #296ebc;

  }

  .w {

    width: 90%;

    margin: 0 auto;

    *zoom: 1;

    overflow: hidden;

  }

  .w:before,

  .w:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  .w1600 {

    width: 90%;

    margin: 0 auto;

    *zoom: 1;

    overflow: hidden;

  }

  .w1600:before,

  .w1600:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  .bg-img {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

  }

  .bg-left {

    background-position: left center;

    background-repeat: no-repeat;

  }

  .imgs-btn img {

    cursor: zoom-in;

  }

  .com-padding {

    padding-top: 40px;

    padding-bottom: 30px;

  }

  .pt0 {

    padding-top: 0;

  }

  .pb0 {

    padding-bottom: 0;

  }

  .p-color {

    color: #7c7c7c;

  }

  .tsi {

    transition: all .3s;

  }

  .com-bg {

    background-color: #f4f4f4;

  }

  .com-ba:before,

  .com-ba:after {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    transition: transform .3s;

  }

  .com-title {

    text-align: center;

  }

  .com-title h3 {

    display: inline-block;

    height: 40px;

    margin-bottom: 10px;

    font-size: 24px;

    position: relative;

  }

  .com-title h3:before {

    content: '';

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 80%;

    transform: translateX(-50%);

    border-bottom: 1px solid #ddd;

  }

  .com-title h3:after {

    content: '';

    position: absolute;

    left: 50%;

    bottom: -1px;

    width: 30px;

    margin-left: -15px;

    border-bottom: 3px solid #296ebc;

  }

  .com-title p {

    padding-bottom: 20px;

    line-height: 2;

    color: #7c7c7c;

    height: 50px;

  }

  .com-title .more {

    display: block;

    margin-bottom: 30px;

    margin-top: -20px;

    color: #296ebc;

    font-size: 14px;

  }

  .position {

    padding: 15px 0;

    line-height: 1.5;

    overflow: hidden;

    font-size: 12px;

    transition: all .3s;

    background-color: #f4f4f4;

  }

  .position a {

    transition: all .3s;

  }

  .position a:hover {

    color: #296ebc;

  }

  .position.top {

    position: fixed;

    left: 0;

    top: 60px;

    width: 100%;

    background: #fff;

    z-index: 998;

    border-bottom: 1px solid #ddd;

  }

  .position .nav a {

    display: inline-block;

    width: 115px;

    text-align: center;

    color: #333;

    transition: all .3s;

  }

  .position .nav a.active {

    background: #296ebc;

  }

  .position .pos > a,

  .position .w > a {

    transition: all .3s;

  }

  .position .pos > a:hover,

  .position .w > a:hover {

    color: #296ebc;

  }

  .go-top {

    display: none;

    cursor: pointer;

  }

  .go-top:before,

  .go-top:after {

    content: '';

    position: fixed;

    right: 10px;

    bottom: 50px;

    width: 30px;

    height: 30px;

    background-color: #999;

    border-radius: 5px;

    z-index: 100;

  }

  .go-top:before {

    background: none;

    width: 12px;

    height: 12px;

    right: 17px;

    bottom: 54px;

    border: 3px solid #fff;

    border-bottom: none;

    border-right: none;

    transform: rotate(45deg);

    z-index: 102;

    border-radius: 0;

  }

  body {

    padding-top: 60px;

  }

  .header {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100px;

    line-height: 100px;

    padding-left: 4vw;

    box-shadow: 0 5px 30px -20px #000;

    background: #fff;

    z-index: 999;

  }

  .header .logo {

    position: relative;

  }

  .header .logo a {

    display: block;

    font-size: 0;

  }

  .header .logo p {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 120px;

    color: #666;

    font-size: 16px;

    white-space: nowrap;

  }

  .header .logo p span {

    display: block;

    height: 30px;

    color: #333;

    font-size: 20px;

  }

  .header .nav {

    width: calc(140% - 939px);

    height: 100%;

    text-align: right;

  }

  .header .nav ul {

    width: 100%;

    height: 100%;

    display: inline-block;

  }

  .header .nav li {

    display: inline-block;

    margin-right:1.2vw;

    position: relative;

  }

  .header .nav li > a {

    height: 54px;

    line-height: 54px;

    color: #3c3c3c;

    font-size: 15px;

    display: block;

    transition: all .3s;

    position: relative;

  }

  .header .nav li > a:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 1px;

    width: 100%;

    border-top: 2px solid #296ebc;

    transform: scaleX(0);

    z-index: 2;

    transition: all .3s;

  }

  .header .nav li:hover > a,

  .header .nav li.active > a {

    color: #296ebc;

  }

  .header .nav li:hover > a:after,

  .header .nav li.active > a:after {

    transform: scaleX(1);

  }

  .header .nav .subnav {

    position: absolute;

    left: 50%;

    bottom: -30px;

    transform: translate(-50%,100%);

    width: 140px;

    height: 0;

    overflow: hidden;

    background: #fff;

    opacity: 0;

    transition: bottom .5s, opacity .5s;

    text-align: center;

  }

  .header .nav .subnav > a {

    display: block;

    line-height: 1;

    padding: 10px 0;

    font-size: 14px;

  }

  .header .nav .subnav > a:hover {

    color: #296ebc;

    background: #f4f4f4;

  }

  .header .nav li:hover .subnav {

    padding: 20px 0;

    height: auto;

    bottom: -1px;

    opacity: 1;

    box-shadow: 0 0 30px -20px #000;

  }

  .header .phone {

    font-size: 0;

  }

  .header .phone p {

    float: left;

    height: 100%;

    padding-left: 35px;

    color: #296ebc;

    font-size: 20px;

    font-weight: 700;

    text-align: right;

    background: url(../images/tell.png) left center no-repeat;

  }

  .header .phone .lang {

    float: left;

    width: 100px;

    height: 100px;

    position: relative;

  }

  .header .phone .lang > a {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    display: block;

    width: 20px;

    height: 20px;

    margin-top: -6px;

    margin-left: -6px;

    color: #296ebc;

    font-size: 14px;

    line-height: 1.1;

    text-align: center;

    border: 2px solid #296ebc;

    background: #fff;

    z-index: 2;

  }

  .header .phone .lang > a.active {

    margin: 0;

    margin-top: 6px;

    margin-left: 6px;

    color: #fff;

    background: #296ebc;

    z-index: 1;

  }

  .header .phone .search {

    float: left;

    width: 100px;

    height: 100px;

    text-align: center;



  }

  .header .phone span {

    display: block;

    width: 100%;

    height: 100%;

  }

  .header .phone form {

    display: none;

    position: fixed;

    top: 100px;

    left: 0;

    width: 100%;

    height: 80px;

    line-height: 80px;

    background-color: #fff;

    border-top: 1px solid #296ebc;

    text-align: center;

    z-index: 2;

  }

  .header .phone form input {

    display: inline-block;

  }

  .header .phone form .key {

    width: 30%;

    height: 40px;

    border-radius: 40px;

    padding-left: 20px;

    padding-right: 100px;

    border: 1px solid #ccc;

  }

  .header .phone form .sub {

    position: relative;

    left: -80px;

    width: 80px;

    height: 40px;

    border-radius: 40px;

  }

  .header.top {

    position: fixed;

    left: 0;

    top: 30px;

    height: 60px;

    line-height: 60px;

    background: #fff;

    opacity: 0;

    visibility: hidden;

    transition: all .3s;

    z-index: 1000;

  }

  .header.top li > a {

    height: 60px;

    color: #2d343f;

  }

  .header.top li > a:hover {

    color: #296ebc;

  }

  .header.top.active {

    top: 0;

    opacity: 1;

    visibility: visible;

  }

  .head-nav-bars span {

    display: block;

    position: absolute;

    top: 50%;

    right: 15px;

    width: 30px;

    height: 4px;

    border-radius: 4px;

    transform: translateY(-50%);

    background-color: #444;

  }

  .head-nav-bars span:before,

  .head-nav-bars span:after {

    content: '';

    display: block;

    position: absolute;

    left: 0;

    top: -10px;

    width: 100%;

    height: 100%;

    border-radius: 4px;

    background-color: #444;

    transition: all .3s;

  }

  .head-nav-bars span:after {

    top: 10px;

  }

  .head-nav-bars span.active {

    background: none;

  }

  .head-nav-bars span.active:before,

  .head-nav-bars span.active:after {

    top: 0;

    transform: rotate(45deg);

    background-color: #296ebc;

  }

  .head-nav-bars span.active:after {

    top: 0;

    transform: rotate(-45deg);

    background-color: #296ebc;

  }

  .header-m {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 60px;

    line-height: 60px;

    padding: 0 10px;

    transition: all .3s;

    background-color: #fff;

    z-index: 999;

    display: none;

  }

  .header-m .logo {

    position: relative;

  }

  .header-m .logo a {

    display: block;

    font-size: 0;

  }

  .header-m .logo img {

    height: 60px;

  }

  .header-m .logo p {

    position: absolute;

    top: 50%;

    left: 60px;

    transform: translateY(-50%);

    color: #2d3540;

    font-size: 12px;

    line-height: 20px;

    text-align: left;

    font-weight: 700;

    white-space: nowrap;

  }

  .header-m .logo p span {

    display: block;

    color: #666;

    font-size: 12px;

    font-weight: normal;

    letter-spacing: 1px;

  }

 

  .header-m .nav.active {

    transform: scaleX(1);

  }

  .header-m .nav:after {

    content: '';

    position: absolute;

    right: 0;

    top: 0;

    width: 50%;

    height: 100%;

    z-index: -1;

    background-color: #fff;

  }

  .header-m .nav li {

    text-align: center;

    line-height: 50px;

    position: relative;

    width: 50%;

    margin-left: 50%;

  }

  .header-m .nav li > a {

    display: block;

    width: 100%;

    height: 100%;

    color: #1a1a1a;

    font-size: 16px;

    position: relative;

    transition: all .3s;

    z-index: 999;

  }

  .header-m .nav li:hover > a,

  .header-m .nav li.active > a {

    color: #296ebc;

    border-bottom: 1px solid #296ebc;

  }

  .header-m .nav li .subnav {

    display: none;

  }

  .swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background-color: #fff;

    opacity: 1;

  }

  .swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background-color: #fff;

    opacity: 1;

  }

  .swiper-pagination-bullet-active {

    background-color: #296ebc;

  }

  .swiper-pagination.swiper-pagination {

    bottom: 10px;

  }

  div.swiper-button-next,

  div.swiper-button-prev {

    width: 34px;

    height: 34px;

    border-radius: 5px;

    background: #296ebc;

  }

  .swiper-button-next:after,

  .swiper-button-prev:after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 8px;

    height: 8px;

    border: 2px solid #fff;

    border-left: none;

    border-bottom: none;

    transform: translate(-50%,-50%) rotate(45deg);

  }

  .swiper-button-prev:after {

    left: 50%;

    transform: translate(-50%,-50%) rotate(-135deg);

  }

  .swiper-button-next:before,

  .swiper-button-prev:before {

    content: '';

    position: absolute;

    left: 45%;

    top: 50%;

    width: 15px;

    margin-left: -8px;

    margin-top: -1px;

    border-bottom: 2px solid #fff;

  }

  .swiper-button-prev:before {

    margin-left: -2px;

  }

  .swiper-button-next:hover,

  .swiper-button-prev:hover {

    background-color: #296ebc;

  }

  .swiper-button-next:hover:after,

  .swiper-button-prev:hover:after {

    border-color: #fff;

  }

  .index-banner {

    width: 100%;

  }

  .index-banner img {

    width: 100%;

  }

  .index-banner .swiper-pagination-bullet.swiper-pagination-bullet {

    margin: 0 6px;

  }

  .index-banner .swiper-pagination-bullet-active {

    background: #fff;

    position: relative;

  }

  .index-banner .swiper-pagination-bullet-active:after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    width: 20px;

    height: 20px;

    margin-left: -10px;

    margin-top: -10px;

    background: #fff;

    opacity: .3;

    border-radius: 50%;

  }

  .index-service {

    padding: 50px 0;

    background: #fafafa;

    box-shadow: 0 4px 20px -15px #000;

  }

  .index-service .main li {

    margin: 15px 0;

  }

  .index-service .main li a {

    background-size: 40px auto;

  }

  .index-service .main li .box {

    display: block;

    padding-left: 50px;

    text-align: left;

  }

  .index-service .main li h4 {

    height: 25px;

    color: #3c3c3c;

    font-size: 18px;

  }

  .index-service .main li p {

    color: #7c7c7c;

    font-size: 14px;

    line-height: 1.5;

  }

  .index-product .nav {

    text-align: center;

  }

  .index-product .nav a {

    display: inline-block;

    line-height: 36px;

    border-radius: 36px;

    padding: 0 2vw;

    margin-bottom: 10px;

    transition: all .3s;

  }

  .index-product .nav a.active {

    color: #fff;

    background: #296ebc;

  }

  .index-product .main {

    position: relative;

  }

  .index-product .main .swiper-pagination-bullet {

    background: #ddd;

  }

  .index-product .main .swiper-pagination-bullet-active {

    background: #296ebc;

  }

  .index-product .main .item.active {

    padding: 40px  0 20px;

  }

  .index-product .main li {

    text-align: center;

    padding: 20px 2vw;

    border-radius: 10px;

    transition: all .3s;

    top: 0;

  }

  .index-product .main .swiper-container{padding: 40px 0 30px;}

  .index-product .main .swiper-container{height: 480px}

  .index-about .txt{padding-top: 0;}

  .index-product .main li .img {

    height: 200px;

  }

  .index-product .main li .img img {

    max-width: 90%;

    max-height: 90%;

  }

  .index-product .main li .txt h4 {

    height: 22px;

    margin-bottom: 18px;

    font-size: 18px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .index-product .main li .txt p {

    height: 0;

    overflow: hidden;

    color: #7c7c7c;

    font-size: 14px;

    line-height: 25px;

    margin-top: -5px;

    opacity: 0;

    transition: all .3s;

  }

  .index-product .main li .txt .more {

    display: none;

    line-height: 32px;

    font-size: 0;

    opacity: 0;

    transition: all .3s;

  }

  .index-product .main li .txt .more a {

    display: inline-block;

    width: 110px;

    color: #fff;

    font-size: 16px;

    background: #296ebc;

  }

  .index-product .main li .txt .more a:first-child {

    background: #296ebc;

    border-top-left-radius: 32px;

    border-bottom-left-radius: 32px;

  }

  .index-product .main li .txt .more a:last-child {

    border-top-right-radius: 32px;

    border-bottom-right-radius: 32px;

  }

  .index-product .main li .txt .more2 a {

    display: inline-block;

    margin-top: 20px;

    line-height: 30px;

    border-bottom: 1px solid #296ebc;

    color: #296ebc;

  }

  .index-product .main.main li {

    box-shadow: 0 0 25px -0 #ddd;

    position: relative;

    top: -30px;

  }

  .index-product .main.main li h4 {

    color: #296ebc;

  }

  .index-product .main.main li p {

    margin-bottom: 15px;

    height: 75px;

    opacity: 1;

  }

  .index-product .main.main li .more {

    display: inline-block;

    opacity: 1;

  }

  .index-product .main.main li .more2 {

    display: none;

  }

  .index-product .main div.swiper-button-next {

    right: -90px;

  }

  .index-product .main div.swiper-button-prev {

    left: -90px;

  }

  .index-case .main li {

    margin-bottom: 10px;

  }

  .index-case .main li .box {

    border: 1px solid #ddd;

    text-align: left;

  }

  .index-case .main li .img {

    padding-bottom: 62%;

  }

  .index-case .main li .txt {

    background: #fff;

    padding: 20px 10px;

  }

  .index-case .main li .txt h4 {

    height: 18px;

    margin-bottom: 10px;

    font-size: 16px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .index-case .main li .txt p {

    height: 50px;

    overflow: hidden;

    color: #7c7c7c;

    font-size: 14px;

    line-height: 25px;

    margin-top: -5px;

  }

  .index-case .main li .txt .more {

    display: block;

    padding-top: 10px;

    margin-top: 20px;

    border-top: 1px solid #ddd;

    color: #296ebc;

    font-size: 12px;

    transition: all .3s;

  }

  .index-case .main li .txt .more:hover {

    color: #296ebc;

  }

  .index-case .get {

    display: block;

    width: 160px;

    line-height: 35px;

    border-radius: 35px;

    margin: 20px auto 0;

    text-align: center;

    color: #296ebc;

    border: 1px solid #296ebc;

  }

  .index-about {

    position: relative;

  }

  .index-about .txt {

    width: 100%;

  }

  .index-about .txt h2 {

    margin-bottom: 20px;

    color: #296ebc;

    font-size: 26px;

    background: url(../images/gtd_bg.png) top left no-repeat;

    text-align: center;

  }

  .index-about .txt h3 {

    height: 35px;

    color: #3c3c3c;

    font-size: 18px;

    text-align: center;

  }

  .index-about .txt .con p {

    color: #7c7c7c;

    line-height: 25px;

    margin-top: -7px;

    text-align: justify;

  }

  .index-about .txt a.more {

    display: block;

    width: 150px;

    line-height: 36px;

    border-radius: 36px;

    margin: 20px auto;

    text-align: center;

    color: #fff;

    background: #296ebc;

  }

  .index-about .img {

    width: 100%;

    position: static;

  }

  .index-about .img .video {

    display: block;

    width: 100%;

    height: 180px;

    border-radius: 20px;

    overflow: hidden;

  }

  .index-about .img .video:after {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: url(../images/icon_play01.png) center no-repeat;

    background-size: auto 50px;

  }

  .index-about .img .more {

    position: static;

    padding: 0 10px;

    background: #fff;

    border-top-right-radius: 20px;

    border-bottom-left-radius: 20px;

    box-shadow: 0 0 30px -20px #000;

  }

  .index-about .img .more a {

    display: block;

    height: 120px;

    padding-top: 75px;

    text-align: center;

    background-position: center 30px;

    background-repeat: no-repeat;

  }

  .index-about .img .more a:hover {

    color: #296ebc;

  }

  .index-about .num {

    background-color: #f4f4f4;

    padding: 25px 0;

    margin-top: 10px;

  }

  .index-about .num .list {

    width: 100%;

  }

  .index-about .num li {

    margin: 10px 0;

  }

  .index-about .num li h4 {

    height: 60px;

    font-size: 16px;

  }

  .index-about .num li h4 span {

    color: #296ebc;

    font-size: 42px;

    font-weight: 700;

    vertical-align: top;

  }

  .index-about .num li p {

    color: #3c3c3c;

    font-size: 14px;

  }

  .index-about .num li .i {

    height: 60px;

  }

  .index-news .nav {

    margin-bottom: 10px;

    text-align: center;

  }

  .index-news .nav a {

    display: inline-block;

    line-height: 30px;

    border-radius: 30px;

    padding: 0 10px;

    font-size: 12px;

    transition: all .3s;

  }

  .index-news .nav a:hover,

  .index-news .nav a.active {

    color: #fff;

    background: #296ebc;

  }

  .index-news .nav .zhan{display: inline-block;}

  .index-news .nav a.fr {

    float: none;

    display: block;

    padding: 0;

    margin: 0;

    margin-top: 10px;

    color: #2d343f;

    background: none;

  }

  .index-news .nav a.fr:hover {

    color: #296ebc;

  }

  .index-news .left {

    width: 50%;

    padding-right: 30px;

  }

  .index-news .left .main .img {

    height: 415px;

  }

  .index-news .left .main .img img {

    height: 100%;

  }

  .index-news .left .main .txt {

    padding: 35px;

    padding-bottom: 25px;

    border: 1px solid #ddd;

  }

  .index-news .left .main .txt h4 {

    height: 22px;

    margin-bottom: 18px;

    font-size: 20px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .index-news .left .main .txt p {

    height: 50px;

    overflow: hidden;

    color: #999;

    font-size: 14px;

    line-height: 25px;

    margin-top: -5px;

  }

  .index-news .left .main .txt .date {

    margin: 20px -15px 0;

    padding: 20px 15px 0;

    color: #7c7c7c;

    border-top: 1px solid #ddd;

  }

  .index-news .right {

    width: 100%;

  }

  .index-news .right .main {

    position: relative;

    bottom: -40px;

    height: 0;

    opacity: 0;

    overflow: hidden;

    transition: all .3s;

  }

  .index-news .right .main.active {

    height: auto;

    opacity: 1;

    bottom: 0;

  }

  .index-news .right .main li {

    padding: 20px 0;

  }

  .index-news .right .main li ~ li {

    border-top: 1px solid #ddd;

  }

  .index-news .right .main li .img {

    width: 100px;

    height: 80px;

  }

  .index-news .right .main li .img img {

    height: 100%;

  }

  .index-news .right .main li .txt {

    width: calc(100% - 110px);

    position: relative;

  }

  .index-news .right .main li .txt h4 {

    height: 18px;

    overflow: hidden;

    margin-bottom: 5px;

    font-size: 16px;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .index-news .right .main li .txt p {

    height: 40px;

    line-height: 20px;

    overflow: hidden;

    margin-bottom: 5px;

    color: #999;

    font-size: 12px;

  }

  .index-news .right .main li .txt .date {

    color: #7c7c7c;

    font-size: 14px;

  }

  .index-partner .main {

    position: relative;

  }

  .index-partner .main .swiper-container {

    padding-bottom: 40px;

  }

  .index-partner .main li {

    height: 90px;

    line-height: 85px;

    text-align: center;

    border: 1px solid #ddd;

    background: #fff;

  }

  .index-partner .main li img {

    max-width: 90%;

    max-height: 90%;

  }

  .index-partner .main div.swiper-button-prev {

    left: -70px;

  }

  .index-partner .main div.swiper-button-next {

    right: -70px;

  }

  .index-after .w {

    background: #1d2088;

    padding-left: 4vw;

    padding-right: 4vw;

    position: relative;

    bottom: -130px;

    margin-top: -130px;

    border-bottom: 3px solid #296ebc;

    z-index: 2;

  }

  .index-after .w p {

    color: #fff;

    font-size: 20px;

}

  .index-after .main .img {

    margin-bottom: 20px;

  }

  .index-after .main img {

    height: 40px;

  }

  .index-after .main h4 {

    height: 26px;

    font-size: 16px;

  }

  .index-after .main p {

    color: #7c7c7c;

    font-size: 12px;

    line-height: 20px;

  }

  .banner {

    width: 100%;

    overflow: hidden;

  }

  .banner img {

    width: 100%;

    transition: all 1s;

  }

  .banner img:hover {

    transform: scale(1.02);

  }

  .banner .pos {

    color: #fff;

    line-height: 70px;

    position: relative;

    top: -70px;

    margin-bottom: -70px;

  }

  .product .main {

    height: 660px;

    background: url(../images/index_pro_bg01.png);

  }

  .pro-main-title {

    float: left;

    width: 220px;

    padding-top: 50px;

    padding-bottom: 50px;

    background-color: #296ebc;

    text-align: center;

    position: relative;

  }

  .pro-main-title:before {

    content: '';

    position: absolute;

    left: -20px;

    top: 0;

    width: 20px;

    height: 60px;

    background: url(../images/index_pro_tit_bg01.png) center no-repeat;

  }

  .pro-main-title h3 {

    height: 65px;

    color: #fff;

    font-size: 32px;

    position: relative;

  }

  .pro-main-title h3:after {

    content: '';

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: 40px;

    height: 2px;

    background-color: #fff;

  }

  .pro-main-title img {

    display: block;

    margin: 40px auto 25px;

  }

  .pro-main-title a.more {

    display: inline-block;

    width: 135px;

    height: 40px;

    line-height: 40px;

    border-radius: 37px;

    color: #296ebc;

    font-size: 18px;

    background-color: #fff;

    transition: all .3s;

  }

  .pro-main-title a.more:hover {

    width: 150px;

  }

  .pro-main-title p {

    display: inline-block;

    line-height: 25px;

    padding-left: 35px;

    margin-top: 20px;

    color: #fff;

    opacity: .6;

    background: url(../images/phone_icon02.png) left center no-repeat;

  }

  .pro-main-title h4 {

    margin-top: 10px;

    color: #fff;

    font-size: 22px;

  }

  .product .list {

    background: url(../images/index_pro_bg01.png);

  }

  .pro-main-title a.more {

    color: #fff;

    border: 1px solid #fff;

    background: none;

  }

  .pro-main-title a.more:hover {

    color: #296ebc;

    background-color: #fff;

  }

  .pro-main-title ul {

    padding: 80px 0;

    margin: 30px 0;

    position: relative;

  }

  .pro-main-title ul:before,

  .pro-main-title ul:after {

    content: '';

    position: absolute;

    left: 50%;

    top: 0;

    height: 60px;

    border-left: 1px solid #fff;

  }

  .pro-main-title ul:after {

    top: auto;

    bottom: 0;

  }

  .pro-main-title li {

    padding: 10px 15px;

  }

  .pro-main-title li a {

    display: block;

    width: 100%;

    height: 45px;

    line-height: 45px;

    text-align: center;

    color: #fff;

    font-size: 18px;

    border-radius: 45px;

    transition: all .3s;

  }

  .pro-main-title li a:hover,

  .pro-main-title li a.active {

    color: #296ebc;

    background-color: #fff;

  }

  .product .com-search .w {

    padding-left: 250px;

  }

  .product .list .main {

    width: 100%;

    height: auto;

    background: none;

  }

  .product .list .main li .img {

    height: 150px;

    line-height: 150px;

    background: #fff;

  }

  .product .list .main li .img img {

    max-width: 100%;

    max-height: 100%;

  }

  .product .list .main li h4 {

    height: 35px;

    line-height: 35px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-bottom: 15px;

  }

  .case li {

  }

  .case li .img {

    padding-bottom: 70%;

  }

  .case li h4 {

    height: 50px;

    overflow: hidden;

    padding-top: 10px;

    line-height: 20px;

    font-size: 14px;

  }

  .join-require .main ul.mycol {

    margin: 0 -2.5vw;

  }

  .join-require .main li.col {

    padding: 0 2.5vw;

  }

  .join-require .main .box {

    padding: 2.5vw 3.5vw;

    background: #313131;

    text-align: left;

    color: #296ebc;

  }

  .join-require .main .box h4 {

    height: 35px;

    font-size: 28px;

  }

  .join-require .main .box h5 {

    height: 40px;

    font-size: 14px;

  }

  .join-require .main .box img {

    width: 100%;

    margin-bottom: 30px;

  }

  .join-require .main .box .con,

  .join-require .main .box .con p {

    line-height: 25px;

    color: #fff;

    font-size: 14px;

  }

  .join-require .more {

    display: block;

    width: 150px;

    line-height: 45px;

    margin: 3.5vw auto 0;

    text-align: center;

    color: #296ebc;

    font-size: 14px;

    background: #313131;

  }

  .join-policy .main {

    position: relative;

    top: -145px;

    margin-bottom: -145px;

    margin-left: 270px;

    width: calc("~100% - 270px");

    padding: 60px 0;

    background: url(../images/join_policy_bg02.png) 42% top no-repeat;

    background-size: auto 100%;

    *zoom: 1;

  }

  .join-policy .main:before,

  .join-policy .main:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  .join-policy .main li {

    float: left;

    width: 50%;

    margin-right: 1%;

    padding-left: 30px;

    border-left: 7px solid #296ebc;

    color: #fff;

    position: relative;

  }

  .join-policy .main li:nth-child(2n - 1) {

    float: right;

  }

  .join-policy .main li h4 {

    height: 50px;

    font-size: 22px;

    font-weight: 700;

  }

  .join-policy .main li .con {

    width: 90%;

  }

  .join-policy .main li .con p {

    line-height: 30px;

  }

  .join-policy .main li span {

    position: absolute;

    right: -10px;

    top: 50%;

    transform: translateY(-50%);

    display: block;

    width: 75px;

    height: 75px;

    line-height: 75px;

    text-align: center;

    color: #296ebc;

    font-size: 38px;

    border: 1px solid #296ebc;

    border-radius: 50%;

    background: #fff;

  }

  .join-policy .main li:nth-child(2n - 1) span {

    right: auto;

    left: -140px;

  }

  .join-after .main li:nth-child(2) {

    padding-top: 5vw;

  }

  .join-after .main li:nth-child(3) {

    padding-top: 2.5vw;

  }

  .join-after .main li:nth-child(4) {

    padding-top: 7.5vw;

  }

  .join-after .main li .box {

    padding: 3vw 2vw 0;

    background: #313131;

    border-bottom: 15px solid #296ebc;

    text-align: left;

  }

  .join-after .main li h4 {

    height: 50px;

    color: #296ebc;

    font-size: 20px;

    border-bottom: 1px solid #626262;

  }

  .join-after .main li .con {

    height: 250px;

    padding-top: 1.2vw;

    overflow: hidden;

  }

  .join-after .main li .con p {

    line-height: 22px;

    color: #fff;

    font-size: 14px;

  }

  .join-after .tel {

    margin-top: 30px;

    text-align: center;

    color: #fff;

    font-size: 28px;

  }

  .join-form .t2 p {

    height: 55px;

    color: #296ebc;

  }

  .join-form .main {

    width: 50%;

  }

  .join-form .main input {

    width: 100%;

    line-height: 48px;

    padding-left: 20px;

    font-size: 14px;

    border: 1px solid #296ebc;

  }

  .join-form .main textarea {

    width: 100%;

    height: 160px;

    padding: 20px;

    margin-top: 20px;

    border: 1px solid #296ebc;

  }

  .join-form .main .sub {

    display: block;

    width: 150px;

    line-height: 50px;

    text-align: center;

    margin-top: 4vw;

    background: #296ebc;

  }

  .solution .title {

    text-align: center;

    margin-bottom: 80px;

  }

  .solution .title h3 {

    font-size: 40px;

    font-weight: 700;

    height: 70px;

    position: relative;

  }

  .solution .title h3:after {

    content: '';

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 30px;

    margin-left: -15px;

    border-bottom: 2px solid #296ebc;

  }

  .solution .title p {

    font-size: 18px;

    margin-top: 30px;

  }

  .solution .main li {

    height: auto;

  }

  .solution .main li .img {

    width: 100%;

  }

  .solution .main li .img img {

    width: 100%;

  }

  .solution .main li .txt {

    width: 100%;

    padding: 20px 0;

  }

  .solution .main li .txt h4 {

    padding-bottom: 15px;

    color: #296ebc;

    font-size: 26px;

    text-align: center;

  }

  .solution .main li .txt .con {

    max-height: 300px;

    overflow: hidden;

    color: #666;

    font-size: 14px;

    line-height: 25px;

    text-align: justify;

  }

  .solution .main li .txt .more {

    display: block;

    width: 150px;

    line-height: 45px;

    margin-top: 15px;

    text-align: center;

    background: #296ebc;

  }

  .service-after .main {

    margin-top: 30px;

  }

  .service-after .main li .box {

    padding: 3.75vw 1.5vw 0;

    background: #fff;

    position: relative;

    text-align: left;

  }

  .service-after .main li .box span {

    position: absolute;

    left: 30px;

    top: 0;

    transform: translateY(-50%);

    display: block;

    width: 76px;

    height: 76px;

    line-height: 76px;

    text-align: center;

    color: #fff;

    font-size: 24px;

    background: #296ebc;

    border-radius: 50%;

  }

  .service-after .main li h5 {

    height: 45px;

    color: #296ebc;

    font-size: 18px;

  }

  .service-after .main li h4 {

    height: 55px;

    margin-bottom: 20px;

    font-size: 24px;

    position: relative;

  }

  .service-after .main li h4:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 30px;

    border-bottom: 3px solid #296ebc;

  }

  .service-after .main li .con {

    height: 200px;

    overflow: hidden;

  }

  .service-after .main li .con p {

    overflow: hidden;

    line-height: 32px;

    font-size: 14px;

  }

  .service-form .main img {

    width: 100%;

    margin-bottom: 30px;

  }

  .service-form .main input {

    width: 100%;

    line-height: 50px;

    padding: 0 20px;

    background: #eee;

  }

  .service-form .main textarea {

    width: 100%;

    height: 190px;

    padding: 25px 20px;

    margin-top: 20px;

    background: #eee;

  }

  .service-form .main .sub {

    display: block;

    width: 160px;

    line-height: 50px;

    margin: 3.25vw auto 0;

    text-align: center;

    background: #296ebc;

  }

  .service-nav {

    margin-top: 1vw;

    margin-bottom: 2.5vw;

    text-align: center;

  }

  .service-nav a {

    display: inline-block;

    margin: 0 15px;

    width: 100px;

    line-height: 40px;

  }

  .service-nav a.active {

    background: #296ebc;

  }

  .video .main li .img {

    padding-bottom: 65%;

    position: relative;

  }

  .video .main li .img span {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: url(../images/icon_play01.png) center no-repeat;

    background-color: rgba(0,0,0,0.2);

  }

  .video .main li h4 {

    line-height: 55px;

    margin-bottom: 20px;

    font-size: 14px;

  }

  .down .main {

    margin-bottom: 60px;

  }

  .down .main li .box {

    height: 56px;

    line-height: 56px;

    text-align: left;

    border-bottom: 1px solid #ddd;

  }

  .down .main li h4 {

    font-size: 14px;

  }

  .faq .main li {

    padding-top: 24px;

  }

  .faq .main li h4 {

    height: 34px;

    line-height: 34px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 18px;

  }

  .faq .main li h4 span {

    display: inline-block;

    width: 34px;

    height: 34px;

    color: #333;

    text-align: center;

    background: #296ebc;

    border-radius: 50%;

    margin-right: 10px;

  }

  .faq .main li p {

    margin-top: 10px;

    height: 50px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    line-height: 1;

    font-size: 14px;

    padding-top: 14px;

    border-bottom: 1px dashed #dcdcdc;

  }

  .news-detail {

    padding-bottom: 50px;

  }

  .news-detail .main {

    width: 100%;

  }

  .news-detail .main img {

    max-width: 100%;

  }

  .news-detail .title {

    text-align: center;

  }

  .news-detail .title h3 {

    line-height: 1.5;

    padding-bottom: 20px;

    font-size: 26px;

  }

  .news-detail .title p {

    height: 60px;

    color: #666;

    font-size: 14px;

    line-height: 1.5;

  }

  .news-detail .content {

    padding: 30px 10px;

    background: #fff;

  }

  .news-detail .content .con {

    min-height: 100px;

    line-height: 30px;

    margin-bottom: 60px;

  }

  .news-detail .content .con img {

    max-width: 100%;

  }

  .news-detail .more {

    padding: 20px;

    margin-top: 30px;

    margin-bottom: 30px;

    background: #fff;

    position: relative;

    font-size: 14px;

  }

  .news-detail .more a {

    display: inline-block;

    width: calc(100% - 60px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    line-height: 35px;

    color: #666;

    font-size: 14px;

    vertical-align: middle;

  }

  .news-detail .more .back {

    display: block;

    position: absolute;

    top: 50%;

    right: 20px;

    width: 150px;

    line-height: 45px;

    margin-top: -23px;

    text-align: center;

    background: #296ebc;

    border-radius: 5px;

    display: none;

  }

  .news-detail .side {

    width: 100%;

  }

  .news-detail .latest {

    padding: 30px 10px;

    margin-bottom: 20px;

    background: #fff;

  }

  .news-detail .latest h5 {

    font-size: 20px;

  }

  .news-detail .latest li {

    padding-top: 30px;

    padding-bottom: 15px;

    color: #666;

    font-size: 15px;

    border-bottom: 1px dashed #e5e5e5;

  }

  .news-detail .latest h6 {

    margin-bottom: 10px;

    transition: all .3s;

  }

  .news-detail .latest li:hover h6 {

    color: #013ca6;

  }

  .news-detail .latest p span {

    color: #ef5e00;

  }

  .news-detail .pro {

    margin-top: 35px;

  }

  .news-detail .pro h5 {

    height: 30px;

    padding-left: 20px;

    font-size: 20px;

  }

  .news-detail .pro li .img {

    background: #fff;

    text-align: center;

  }

  .news-detail .pro li img {

    max-width: 100%;

  }

  .news-detail .pro li h6 {

    line-height: 55px;

    font-size: 14px;

    text-align: center;

    transition: all .3s;

  }

  .news-detail .pro li:hover h6 {

    color: #296ebc;

  }

  .page-nav {

    text-align: center;

    margin-bottom: -20px;

  }

  .page-nav .w {

    position: relative;

    top: -20px;

    padding: 20px 0;

    background-color: #fff;

    transition: all .3s;

  }

  .page-nav ul {

    display: inline-block;

    font-size: 0;

  }

  .page-nav li {

    display: inline-block;

    position: relative;

    z-index: 1;

  }

  .page-nav li:last-of-type {

    margin-right: 0;

  }

  .page-nav li a {

    display: block;

    min-width: 90px;

    color: #666;

    height: 30px;

    line-height: 30px;

    font-size: 12px;

    border: 1px solid #fff;

    border-radius: 40px;

    transition: all .3s;

  }

  .page-nav li:hover a,

  .page-nav li.active a {

    color: #296ebc;

    border: 1px solid #296ebc;

    border-radius: 40px;

  }

  .page-nav li:hover a {

    color: #fff;

    background: #296ebc;

  }

  .pro-detail {

    width: 100%;

  }

  .pro-detail .top .img.fl {

    width: 100%;

    overflow: hidden;

  }

  .pro-detail .top .txt {

    margin-top: 15px;

    width: 100%;

  }

  .pro-detail .top {

    padding: 25px 10px;

    background-color: #fff;

  }

  .pro-detail .top .big li {

    text-align: center;

    background-color: #fff;

  }

  .pro-detail .top .big li .box {

    height: 200px;

    line-height: 200px;

    overflow: hidden;

    text-align: center;

  }

  .pro-detail .top .big li .box img {

    max-width: 100%;

    max-height: 100%;

  }

  .pro-detail .top .list {

    position: relative;

    padding: 0 40px;

    margin-top: 10px;

    text-align: center;

  }

  .pro-detail .top .list li {

    border: 1px solid transparent;

  }

  .pro-detail .top .list li img {

    width: 100%;

  }

  .pro-detail .top .list .swiper-slide-thumb-active {

    border-color: #296ebc;

  }

  .pro-detail .top .txt {

    padding-top: 20px;

    padding-left: 2vw;

  }

  .pro-detail .top .title h4 {

    height: 52px;

    color: #1e242b;

    font-size: 24px;

    border-bottom: 1px solid #ddd;

  }

  .pro-detail .top .txt .con {

    min-height: 100px;

    padding: 20px 1.5vw;

    color: #999;

    font-size: 14px;

    line-height: 35px;

  }

  .pro-detail .top .more {

    text-align: center;

  }

  .pro-detail .top .more a {

    display: inline-block;

    padding: 10px 30px;

    margin-right: 1vw;

    color: #fff;

    font-size: 14px;

    background-color: #296ebc;

    border-radius: 40px;

    vertical-align: middle;

  }

  .pro-detail .top .more span {

    display: inline-block;

    padding-left: 35px;

    margin-top: 10px;

    color: #296ebc;

    font-size: 24px;

    vertical-align: middle;

    background: url(../images/icon_phone01.png) left center no-repeat;

  }

  .pro-detail .swiper-button-next,

  .pro-detail .swiper-button-prev {

    width: 30px;

    height: 50px;

    background: #a3a3a3;

    z-index: 99999;

    left: 0;

    margin-top: -25px;

  }

  .pro-detail .swiper-button-next {

    left: auto;

    right: 0;

  }

  .pro-detail .swiper-button-next:after,

  .pro-detail .swiper-button-prev:after {

    content: "";

    position: absolute;

    left: 45%;

    top: 50%;

    width: 10px;

    height: 10px;

    border: 3px solid #fff;

    border-left: none;

    border-bottom: none;

    transform: translate(-50%,-50%) rotate(45deg);

  }

  .pro-detail .swiper-button-prev:after {

    left: 55%;

    transform: translate(-50%,-50%) rotate(-135deg);

  }

  .pro-detail .swiper-button-next:hover,

  .pro-detail .swiper-button-prev:hover {

    background-color: #296ebc;

  }

  .pro-detail .swiper-button-next:hover:after,

  .pro-detail .swiper-button-prev:hover:after {

    border-color: #fff;

  }

  .pro-content {

    float: left;

    width: 100%;

    padding: 40px 0 0;

    background-color: #fff;

  }

  .pro-content table {

    display: block;

    overflow: hidden;

    overflow-x: auto;

  }

  .pro-content table tr:nth-child(2n) {

    background: rgba(176,196,222,.2);

  }

  .pro-content table td {

    border: 1px solid #ddd;

    line-height: 2.5;

  }

  .pro-content .pc-title {

    height: 30px;

    white-space: nowrap;

    overflow-y: hidden;

    overflow-x: auto;

    border-bottom: 1px solid #ddd;

  }

  .pro-content .pc-title h4 {

    display: inline-block;

    height: 100%;

    padding: 0 2px;

    margin: 0 3px;

    padding-bottom: 10px;

    margin-bottom: -1px;

    color: #1e242b;

    font-size: 14px;

    position: relative;

    overflow: hidden;

  }

  .pro-content .pc-title h4:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 5px;

    background-color: #296ebc;

    transition: all .3s;

    opacity: .8;

    display: none;

  }

  .pro-content .pc-title h4.active:after {

    display: block;

  }

  .pro-content .con {

    display: none;

    line-height: 1.5;

  }

  .pro-content .con.case .img {

     height: auto;

     line-height: 1;

  }

  .pro-content .con.active {

    display: block;

    width: 100%;

    padding: 15px 0;

  }

  .pro-content img {

    max-width: 100%;

  }

  .pro-related .nav {

    width: 100%;

    height: 50px;

  }

  .pro-related .nav a {

    color: #1e242b;

    font-size: 24px;

  }

  .pro-related li {

    margin-bottom: 10px;

  }

  .pro-related li a {

    display: block;

    transition: all .3s;

  }

  .pro-related li:hover a {

    transform: translateY(-5px);

  }

  .pro-related .img {

    height: 150px;

    line-height: 150px;

    text-align: center;

    overflow: hidden;

    background: #fff;

  }

  .pro-related .img img {

    max-width: 100%;

    max-height: 100%;

    transition: all .3s;

  }

  .pro-related li:hover .img img {

    transform: scale(1.02);

  }

  .pro-related h4 {

    height: 40px;

    line-height: 40px;

    overflow: hidden;

    color: #1e242b;

    font-size: 14px;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .pro-related li:hover h4 {

    color: #296ebc;

  }

  .case-detail {

    background-color: #f4f4f4;

  }

  .case-detail .box {

    height: 430px;

  }

  .case-detail .img img {

    height: 100%;

    max-width: none;

    max-height: none;

  }

  .case-detail .txt {

    padding-left: 6vw;

    color: #333;

  }

  .about-story .main li {

    height: 710px;

    margin-bottom: 60px;

  }

  .about-story .main li .img {

    width: calc(50% - 3vw);

    margin-left: 3vw;

  }

  .about-story .main li:nth-child(2n) .img {

    margin-left: 0;

    margin-right: 3vw;

  }


  .about-story .main li .img1 {

    width: calc(50% - 3vw);

    margin-left: 3vw;

  }

  .about-story .main li:nth-child(2n) .img1 {

    margin-left: 0;

    margin-right: 3vw;

  }

  .about-story .main li .txt .box {

    padding-right: 3vw;

  }

  .about-story .main li .txt h5 {

    padding-bottom: 20px;

    color: #296ebc;

    font-size: 28px;

  }

  .about-story .main li .txt h4 {

    height: 70px;

    margin-bottom: 40px;

    font-size: 28px;

    position: relative;

  }

  .about-story .main li .txt h4:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 30px;

    border-bottom: 3px solid #296ebc;

  }

  .about-story .main li .txt .con p {

    line-height: 28px;

    color: #666;

    font-size: 14px;

  }

  .about-story .main li:nth-child(2n) .txt .box {

    padding-right: 0;

    padding-left: 3vw;

  }

  .about .top li.row {

    height: auto;

  }

  .about .top li.row div{width: 100%;float: none;}

  .about-culture .main .row{height: auto;}

  .center-fa{position: static;}

  .center-fa .centerY{position: static;transform: none;}

  .center-img img{position: static;transform: none;}

  .about .top li.row .img {

  }

  .about .top li.row img {

    width: 100%;

  }

  .about .top li.row:nth-child(2n) .img {

    padding-left: 0;

  }

  .about .top li.row .txt {

  }

  .about .top li.row .txt .box {

    height: 100%;

  }

  .about .top li.row .txt h4 {

    padding-bottom: 1.5vw;

    font-size: 26px;

    line-height: 1.5;

    text-align: center;

  }

  .about .top li.row .txt h5 {

    height: 50px;

    color: #666;

    font-size: 16px;

  }

  .about .top li.row .txt .con {

    line-height: 25px;

    text-align: justify;

  }

  .about .top li.row:nth-child(2n) .txt {

    padding-right: 0;

  }

  .about .main li.row {

    height: 370px;

    margin-bottom: 20px;

  }

  .about .main li.row .img {

    padding-left: 2.5vw;

  }

  .about .main li.row:nth-child(2n - 1) .img {

    padding-left: 0;

    padding-right: 2.5vw;

  }

  .about .main li.row .txt {

    padding-right: 2.5vw;

  }

  .about .main li.row .txt .box {

    height: 100%;

  }

  .about .main li.row .txt h4 {

    padding-bottom: 1.5vw;

    font-size: 28px;

  }

  .about .main li.row .txt h5 {

    height: 90px;

    line-height: 30px;

    overflow: hidden;

    font-size: 14px;

  }

  .about .main li.row .txt li {

    display: inline-block;

    margin-right: 4.5vw;

    text-align: center;

  }

  .about .main li.row .txt li h6 {

    height: 48px;

    color: #296ebc;

    font-size: 38px;

  }

  .about .main li.row .txt li span {

    font-size: 14px;

  }

  .about .main li.row:nth-child(2n -1) .txt {

    padding-right: 0;

    padding-left: 2.5vw;

  }

  .about-culture .main .row {

    margin-bottom: 10px;

  }

  .about-culture .main .row > div {

    width: 100%;

  }

  .about-culture .main .row img {

    width: 100%;

  }

  .about-culture .main .row .txt {

    padding: 20px 0;

    text-align: center;

  }

  .about-culture .main .row .txt .box {

    height: 100%;

  }



  .about-culture .main .row h5 {

    height: 55px;

    color: #296ebc;

    font-size: 28px;

  }

  .about-culture .main .row h4 {

    height: 40px;

    margin-bottom: 10px;

    font-size: 24px;

    position: relative;

  }

  .about-culture .main .row h4:after {

    content: '';

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 30px;

    margin-left: -15px;

    border-bottom: 3px solid #e5e5e5;

  }

.about-culture .main .row img {

    width: 100%;

  }

  .about-culture .main .row .txt1 {

    padding: 20px 0;

    text-align: center;

  }

  .about-culture .main .row .txt1 .box {

    height: 100%;

  }

  .about-culture .main .row .con {

    font-size: 16px;

    line-height: 25px;

  }

  .about-honor .main li .img {

    height: 250px;

    line-height: 250px;

    border: 1px solid #d2d2d2;

  }

  .about-honor .main li .img img {

    max-width: 90%;

    max-height: 90%;

  }

  .about-honor .main li h4 {

    color: #292b3e;

    height: 55px;

    line-height: 55px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-bottom: 20px;

  }

  .about-honor .more {

    display: block;

    width: 150px;

    line-height: 45px;

    margin: 60px auto 0;

    text-align: center;

    background: #296ebc;

  }

  .about-cert .main li {

    margin-bottom: 20px;

  }

  .about-cert .main li .img {

    height: 150px;

    line-height: 150px;

    border: 1px solid #d2d2d2;

  }

  .about-cert .main li .img img {

    max-width: 90%;

    max-height: 90%;

  }

  .about-cert .more {

    display: block;

    width: 150px;

    line-height: 45px;

    margin: 60px auto 0;

    text-align: center;

    background: #296ebc;

  }

  .about-history li {

    padding: 15px 0;

    position: relative;

    overflow: hidden;

  }

  .about-history li:before,

  .about-history li:after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    height: 100%;

    transform: translate(-50%,-50%);

    border-left: 1px solid #ddd;

  }

  .about-history li:after {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #aaa;

    border: none;

  }

  .about-history li:hover:after {

    background-color: #0096ff;

  }

  .about-history li .time {

    float: left;

    width: 50%;

    height: 100%;

    padding: 0 5vw;

    font-size: 36px;

    font-weight: 700;

    line-height: 35px;

    text-align: right;

    position: absolute;

    top: 0;

  }

  .about-history li .time span {

    position: absolute;

    top: 50%;

    right: 2.5vw;

    transform: translateY(-50%);

  }

  .about-history li:nth-child(2n) .time span {

    right: auto;

    left: 2.5vw;

  }

  .about-history li .txt {

    float: right;

    width: 50%;

    padding: 0 5vw;

    color: #7c7c7c;

    font-size: 14px;

    line-height: 25px;

    text-align: left;

  }

  .about-history li:nth-child(2n) .time {

    float: right;

    text-align: left;

    right: 0;

  }

  .about-history li:nth-child(2n) .time span {

    right: auto;

    left: 2.5vw;

  }

  .about-history li:nth-child(2n) .txt {

    float: left;

    text-align: right;

  }

  .about-photo li.col {

    margin-bottom: 15px;

  }

  .about-photo li .img {

    height: 0;

    padding-bottom: 63%;

    position: relative;

  }

  .about-photo li img {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

  }

  .about-photo li h4 {

    height: 30px;

    line-height: 30px;

    text-align: center;

    color: #1e242b;

    font-size: 12px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    background-color: #fff;

  }

  .about-swiper .main {

    position: relative;

  }

  .about-swiper .swiper-button-next,

  .about-swiper .swiper-button-prev {

    left: -60px;

    width: 36px;

    height: 36px;

    background: none;

    border: 3px solid #dee3ef;

  }

  .about-swiper .swiper-button-next:hover,

  .about-swiper .swiper-button-prev:hover {

    background: #296ebc;

    border-color: #296ebc;

  }

  .about-swiper .swiper-button-next {

    left: auto;

    right: -60px;

  }

  .about-swiper .swiper-button-next:after,

  .about-swiper .swiper-button-prev:after {

    width: 6px;

    height: 6px;

    border-color: #576077;

  }

  .about-swiper .swiper-button-next:hover:after,

  .about-swiper .swiper-button-prev:hover:after {

    border-color: #fff;

  }

  .com-pages {

    margin-top: 20px;

    text-align: center;

  }

  .com-pages span,

  .com-pages a {

    display: inline-block;

    width: 50px;

    height: 40px;

    line-height: 40px;

    margin: 0 5px;

    font-size: 14px;

    font-weight: 700;

    background: #d6d6d6;

    transition: all .3s;

    vertical-align: middle;

  }

  .com-pages a:first-of-type,

  .com-pages a:last-of-type {

    width: 85px;

    color: #296ebc;

    background: #333;

  }


 

  .com-pages a:hover {

    color: #fff;

    background-color: #296ebc;

  }

  .com-pages span {

    color: #fff;

    background: #296ebc;

  }

  .com-pages label {

    display: none;

  }

  .news-nav .box {

    padding: 0 6vw;

  }

  .news-nav a {

    margin: 0 2.5vw;

  }

  .news li.col {

    text-align: left;

    margin-top: 30px;

  }

  .news li .img {

    height: 0;

    padding-bottom: 62%;

    position: relative;

  }

  .news li img {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

  }

  .news li .txt {

    padding: 25px 20px;

    overflow: hidden;

    background: #fff;

  }

  .news li h4 {

    height: 18px;

    line-height: 1;

    color: #1e242b;

    font-size: 18px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .news li span {

    display: block;

    color: #999;

    font-size: 12px;

    line-height: 35px;

  }

  .news li .con {

    height: 50px;

    overflow: hidden;

    color: #999;

    font-size: 14px;

    line-height: 25px;

  }

  .contact .main {

    padding-left: 4vw;

    padding-top: 1.25vw;

    background-color: #fff;

  }

  .contact .main li.col {

    padding-top: 20px;

    padding-bottom: 10px;

    text-align: left;

    overflow: hidden;

    border-bottom: 1px solid #e7e7e7;

  }

  .contact .main li:nth-child(n + 4) {

  }

  .contact .main li .img {

    float: left;

    height: 65px;

    width: 60px;

  }

  .contact .main li .img img {

    width: 40px;

  }

  .contact .main li .txt {

    float: left;

    width: calc(100% - 60px);

  }

  .contact .main li h5 {

    height: 30px;

    color: #555;

    font-size: 16px;

  }

  .contact .main li p {

    color: #1e242b;

    font-size: 18px;

  }

  .contact .map {

    margin-top: 40px;

  }

  #map {

    width: 100%;

    height: 400px;

  }

  #map td {

    box-sizing: content-box;

  }

  #map img {

    max-width: none;

    max-height: none;

  }

  .BMapLib_SearchInfoWindow .BMapLib_bubble_center {

    line-height: 1.5;

  }

  .map h5 {

    padding: 10px 0;

    padding-left: 10px;

    line-height: 2.5;

    color: #262626;

    font-size: 12px;

    background-color: #fff;

  }

  .map h5 img {

    margin-right: 5px;

  }

  .contact-all .main .row {

    height: 400px;

  }

  .contact-all .main .row .img {

    width: calc(50% + 3vw);

  }

  .contact-all .main .row .txt {

    width: calc(50% - 3vw);

    padding-left: 3vw;

  }

  .contact-all .main .row .txt .box {

    height: 100%;

  }

  .contact-all .main .row h4 {

    height: 3.5vw;

    margin-bottom: 2vw;

    font-size: 32px;

    border-bottom: 1px dashed #b5b5b5;

  }

  .contact-all .main .row .con p {

    color: #666;

    line-height: 34px;

  }

  .contact-message .main .txt {

    width: 100%;

  }

  .contact-message .main .img {

    display: none;

    height: 420px;

  }

  .contact-message .main li {

    margin-bottom: 10px;

  }

  .contact-message .main input {

    width: 100%;

    height: 40px;

    line-height: 40px;

    padding-left: 15px;

    padding-right: 15px;

    border: 1px solid #d2d2d2;

  }

  .contact-message .main textarea {

    width: 100%;

    height: 150px;

    padding: 25px 15px;

    border: 1px solid #d2d2d2;

  }

  .contact-message .main .sub {

    display: block;

    width: 150px;

    line-height: 40px;

    margin: 30px auto 0;

    text-align: center;

    background-color: #296ebc;

  }

  .job .main li {

    overflow: hidden;

    background: #fff;

  }

  .job .main li:nth-child(2n - 1) {

    background-color: #f4f4f4;

  }

  .job .main li:nth-child(1) {

    border-top: 1px solid #dcdcdc;

  }

  .job .main li .tit p {

    line-height: 35px;

  }

  .job .main li:nth-child(1) .tit p {

    color: #666;

    line-height: 45px;

    background: #eee;

  }

  .job .main li .tit {

    color: #666;

    font-size: 12px;

    position: relative;

    cursor: pointer;

  }

  .job .main li.active .tit,

  .job .main li .tit:hover {

    color: #fff;

    background: #296ebc;

  }

  .job .main li .tit span:after {

    content: '+';

    position: absolute;

    right: 3vw;

    top: 50%;

    transform: translateY(-50%);

  }

  .job .main li.active .tit span:after {

    content: '-';

    color: #fff;

  }

  .job .main li .con {

    display: none;

    padding: 4vw 7.5vw;

    background: #fff;

  }

  .job .main li .con p {

    color: #666;

    font-size: 16px;

    line-height: 25px;

  }

  .related-title {

    text-align: center;

  }

  .related-title h3 {

    height: 50px;

    font-size: 28px;

  }

  .related-title h4 {

    height: 60px;

    color: #666;

    font-size: 14px;

  }

  .related .main {

    width: 100%;

    position: relative;

  }

  .related .swiper-button-next,

  .related .swiper-button-prev {

    left: -50px;

    width: 40px;

    height: 40px;

    background: #999;

  }

  .related .swiper-button-next:hover,

  .related .swiper-button-prev:hover {

    background: #296ebc;

  }

  .related .swiper-button-next {

    left: auto;

    right: -50px;

  }

  .related .swiper-button-next:after,

  .related .swiper-button-prev:after {

    width: 6px;

    height: 6px;

    border-color: #fff;

  }

  .pro-related li {

    text-align: center;

    margin-top: 0 !important;

  }

  .case-related .txt {

    background: #fff;

  }

  .links {

    display: none;

    padding-bottom: 30px;

    line-height: 2;

    color: #687281;

    font-size: 14px;

  }

  .links a {

    margin-right: 1vw;

    color: #687281;

    font-size: 14px;

  }

  .links a:hover {

    color: #296ebc;

    text-decoration: underline;

  }

  .footer {

    padding-top: 60px;

    color: #8793a5;

    font-size: 14px;

    background-color: #2d343f;

  }

  .footer .nav {

    display: none;

  }

  .footer.index {

    padding-top: 170px;

  }

  .footer dl {

    float: left;

    margin-right: 6vw;

    margin-bottom: 30px;

    text-align: left;

  }

  .footer dl:last-child {

    margin-right: 0;

  }

  .footer dt {

    height: 55px;

    color: #b2c0d7;

    font-size: 18px;

    position: relative;

  }

  .footer dd a {

    display: block;

    height: 35px;

  }

  .footer .phone {

    float: left;

  }

  .footer .phone h4 {

    height: 30px;

    color: #b2c0d7;

  }

  .footer .phone h5 {

    height: 30px;

    color: #296ebc;

    font-size: 22px;

  }

  .footer .phone .more {

    display: block;

    width: 150px;

    line-height: 35px;

    border-radius: 35px;

    margin-top: 10px;

    text-align: center;

    color: #fff;

    font-size: 12px;

    border: 1px solid #fff;

  }

  .footer .qr {

    margin-left: 3vw;

  }

  .footer .qr img {

    width: 110px;

    height: 110px;

    padding: 5px;

    background: #fff;

  }

  .footer .qr p {

    margin-top: 15px;

    color: #677284;

    font-size: 14px;

    text-align: center;

  }

  .footer .copy {

    margin-top: 20px;

    padding: 15px 0;

    line-height: 2;

    border-top: 1px solid #38404d;

    color: #687281;

    font-size: 12px;

    text-align: center;

  }

  .footer .copy .w > div {

    width: 100%;

  }

  .footer .copy span,

  .footer .copy a {

    display: inline;

  }

  .footer a {

    transition: all .3s;

  }

  .footer a:hover {

    color: #296ebc;

    transform: translateX(4px);

    opacity: 1;

  }

  .hor-top-show {

    position: relative;

    bottom: -40px;

    height: 0;

    opacity: 0;

    overflow: hidden;

    transition: all .3s;

  }

  .hor-top-show.active {

    height: auto;

    opacity: 1;

    bottom: 0;

  }

  .hvr1.hvr1 .img {

    background: #000;

    position: relative;

  }

  .hvr1.hvr1 .img img {

    transition: all .5s;

  }

  .hvr1.hvr1 .img:before {

    content: '';

    position: absolute;

    top: 35px;

    bottom: 35px;

    left: 20px;

    right: 20px;

    border-top: 1px solid #fff;

    border-bottom: 1px solid #fff;

    transform: scaleX(0);

    transition: all .5s;

    z-index: 1;

  }

  .hvr1.hvr1 .img:after {

    content: '';

    position: absolute;

    top: 20px;

    bottom: 20px;

    left: 35px;

    right: 35px;

    border-left: 1px solid #fff;

    border-right: 1px solid #fff;

    transform: scaleY(0);

    transition: all .5s;

    z-index: 1;

  }

  .hvr1.hvr1:hover img {

    opacity: .8;

  }

  .hvr1.hvr1:hover .img:before {

    transform: scaleX(1);

  }

  .hvr1.hvr1:hover .img:after {

    transform: scaleY(1);

  }

  .hover-img-big .img {

    overflow: hidden;

  }

  .hover-img-big .img img {

    transition: transform .5s;

  }

  .hover-img-big:hover img {

    transform: scale(1.04);

  }

  .hover-color.hover-color h4 {

    transition: all .3s;

  }

  .hover-color.hover-color:hover h4 {

    color: #296ebc;

  }

  .hover-left-rotate {

    transition: transform .3s;

  }

  .hover-left-rotate:hover {

    transform: rotateY(360deg);

  }

  .hover-left-move {

    position: relative;

    right: 0;

    transition: all .3s;

  }

  .hover-left-move:hover {

    right: -4px;

  }

  .hover-top-move {

    display: inline-block;

    position: relative;

    transition: transform .3s;

  }

  .hover-top-move:hover {

    transform: translateY(-5px);

  }

  .hover-bg-big {

    position: relative;

    z-index: 1;

  }

  .hover-bg-big:after {

    content: "";

    background-color: #fff;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    transform: scale(0);

    transition: transform .3s;

    z-index: -1;

  }

  .hover-bg-big:hover:after {

    transform: scale(1);

  }

  .hvr-bg-move {

    position: relative;

    overflow: hidden;

    transition: all .5s;

  }

  .hvr-bg-move:hover {

    box-shadow: 0 0 5px #fff inset;

  }

  .hvr-bg-move:after {

    content: '';

    position: absolute;

    left: -100%;

    top: 0;

    width: 0;

    height: 100%;

    background-color: #fff;

    opacity: .5;

    box-shadow: 0 0 30px #fff;

  }

  .hvr-bg-move:hover:after {

    left: 100%;

    width: 50%;

    transition: all .5s;

  }

  .hvr-bg-move2 {

    position: relative;

    overflow: hidden;

    z-index: 1;

    transition: all .3s;

  }

  .hvr-bg-move2:hover {

    box-shadow: 0 0 5px #fff inset;

  }

  .hvr-bg-move2:after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    width: 300px;

    height: 300px;

    margin-top: -150px;

    margin-left: -150px;

    border-radius: 50%;

    background: #fff;

    transform: scale(0);

    transition: all .3s;

    z-index: -1;

  }

  .hvr-bg-move2:hover:after {

    animation: bg_big 1s;

  }

  @keyframes bg_big {

    0% {

      opacity: .6;

    }

    100% {

      opacity: 0;

      transform: scale(1);

    }

  }

  .flash {

    overflow: hidden;

    width: 380px;

    height: 230px;

    position: relative;

  }

  .flash em {

    cursor: pointer;

    height: 230px;

    width: 380px;

    left: -380px;

    position: absolute;

    top: 0;

    transform: skewX(-25deg);

    transition: all 0s;

    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

    background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

    background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));

  }

  .flash:hover em {

    left: 380px;

    transition: all 0.7s;

  }

  .flip img {

    width: 380px;

    height: 230px;

    position: absolute;

    left: 0;

    top: 0;

    z-index: 2;

    transform: rotateY(0deg);

    transition: all 0.6s ease 0s;

    backface-visibility: hidden;

  }

  .flip span {

    position: absolute;

    width: 380px;

    height: 230px;

    background: #e1e1e1;

    line-height: 230px;

    text-align: center;

    transform: rotateY(-180deg);

    transition: all 0.5s ease 0s;

    backface-visibility: hidden;

    left: 0;

    top: 0;

  }

  .flip:hover img {

    transform: rotateY(180deg);

  }

  .flip:hover span {

    transform: rotateY(0deg);

  }

  .up span {

    height: 40px;

    bottom: -40px;

    display: block;

    background: #333;

    transition: all 0.5s;

    line-height: 40px;

    color: #fff;

  }

  .up:hover img {

    margin-top: -40px;

    transition: all 0.5s;

  }

  .panorama {

    background-image: url(../images/6608185829213862083.jpg);

    background-size: auto 100%;

    cursor: pointer;

    animation: panorama 10s linear infinite alternate;

    animation-play-state: paused;

  }

  .panorama:hover,

  .panorama:focus {

    animation-play-state: running;

  }

  @keyframes panorama {

    to {

      background-position: 100% 0;

    }

  }

  .border .txt {

    position: absolute;

    top: 10px;

    left: 10px;

    right: 10px;

    bottom: 10px;

    color: #fff;

    line-height: 230px;

    transform: scale(0);

  }

  .border .txt:before,

  .border .txt:after {

    position: absolute;

    content: '';

    opacity: 0;

    transition: all 0.5s;

    transition-delay: .3s;

  }

  .border .txt:before {

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    border-top: 1px solid #fff;

    border-bottom: 1px solid #fff;

    transform: scale(0,1);

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

  }

  .border .txt:after {

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    border-right: 1px solid #fff;

    border-left: 1px solid #fff;

    transform: scale(1,0);

    transform-origin: 100% 0;

  }

  .border:hover .txt:before,

  .border:hover .txt:after {

    opacity: 1;

    transform: scale(1);

    transition: all 0.5s;

  }

  .border:hover .txt {

    transform: scale(1);

  }

  .border:hover img {

    opacity: .5;

  }

  .border2 .txt {

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    bottom: 20px;

    color: #fff;

    line-height: 230px;

    transform: scale(0);

  }

  .border2 .txt:before,

  .border2 .txt:after {

    position: absolute;

    content: '';

    opacity: 0;

    transition: all 0.5s;

    transition-delay: .3s;

  }

  .border2 .txt:before {

    top: 15px;

    right: 0;

    bottom: 15px;

    left: 0;

    border-top: 1px solid #fff;

    border-bottom: 1px solid #fff;

    transform: scale(0,1);

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

  }

  .border2 .txt:after {

    top: 0;

    right: 15px;

    bottom: 0;

    left: 15px;

    border-right: 1px solid #fff;

    border-left: 1px solid #fff;

    transform: scale(1,0);

    transform-origin: 100% 0;

  }

  .border2:hover .txt:before,

  .border2:hover .txt:after {

    opacity: 1;

    transform: scale(1);

    transition: all 0.5s;

  }

  .border2:hover .txt {

    transform: scale(1);

  }

  .border2:hover img {

    opacity: .5;

  }

  .jitter:hover img {

    animation: tada 1s .2s ease both;

  }

  @keyframes tada {

    0% {

      transform: scale(1);

    }

    10%,

    20% {

      transform: scale(0.9) rotate(-3deg);

    }

    30%,

    50%,

    70%,

    90% {

      transform: scale(1.1) rotate(3deg);

    }

    40%,

    60%,

    80% {

      transform: scale(1.1) rotate(-3deg);

    }

    100% {

      transform: scale(1) rotate(0);

    }

  }

  .effect1 {

    perspective: 800px;

  }

  .effect1 .pic {

    display: block;

    transition: 0.4s;

  }

  .effect1 .txt {

    position: absolute;

    left: 0;

    background: #fff;

    height: 90%;

    width: 80%;

    padding: 5% 10%;

    transition: 0.6s;

    top: -100%;

    transition: all 0.5s;

    z-index: -1;

  }

  .effect1:hover .pic {

    transform: rotateX(80deg);

    transform-origin: center bottom 0;

  }

  .effect1:hover .txt {

    top: 0;

  }

  .effectBtn {

    display: inline-block;

    padding: 5px 25px;

    font-size: 14px;

    color: #fff;

    border: 2px solid #4d92d9;

    background-color: #4d92d9;

    text-decoration: none;

    transition: 0.4s;

  }

  .text-desc {

    position: absolute;

    left: 0;

    top: 0;

    background-color: #fff;

    height: 100%;

    opacity: 0;

    width: 100%;

    padding: 20px;

  }

  .effect2 {

    perspective: 500px;

    z-index: 5;

  }

  .effect2 .txt {

    position: absolute;

    left: 0;

    bottom: 0;

    background: #fff;

    height: 90%;

    width: 80%;

    padding: 5% 10%;

    transition: 0.6s;

    z-index: -1;

    transform: rotateX(80deg);

    transform-origin: center bottom 0;

    opacity: 0;

  }

  .effect2:hover .txt {

    transform: none;

    opacity: 1;

  }

  .effect2:hover img {

    transform: translateY(-100%);

  }

  .effect3 {

    perspective: 500px;

    overflow: visible;

  }

  .effect3 .txt {

    position: absolute;

    left: 0;

    top: 0;

    background: #fff;

    height: 90%;

    width: 70%;

    padding: 5% 20% 5% 10%;

    transition: 0.6s;

    transform: translateX(-100%);

    opacity: 0;

  }

  .effect3:hover .txt {

    transform: translateX(0px);

    opacity: 1;

  }

  .effect3:hover img {

    transform: scale(0.5) translateX(100%);

    position: relative;

    z-index: 9;

  }

  .effect4 .txt {

    position: absolute;

    left: 0;

    top: 0;

    background: #fff;

    height: 70%;

    width: 80%;

    padding: 25% 10% 5% 10%;

    transition: 0.6s;

    transform: translateY(100%);

    opacity: 0;

  }

  .effect4:hover .txt {

    transform: translateY(0px);

    opacity: 1;

  }

  .effect4:hover img {

    transform: scale(0.3) translateY(-100%);

    position: relative;

    z-index: 9;

  }

  .effect5 .txt {

    position: absolute;

    right: 0;

    top: 0;

    background: #fff;

    height: 90%;

    width: 90%;

    padding: 5%;

    transition: 0.6s;

    opacity: 0;

    transform: perspective(600px) rotateY(-90deg);

    transform-origin: right center 0;

    width: 40%;

  }

  .effect5 img {

    position: relative;

    right: 0;

  }

  .effect5:hover .txt {

    opacity: 1;

    transform: perspective(600px) rotateY(0deg);

    z-index: 5;

  }

  .effect5:hover img {

    right: 50%;

  }

  .effect6 {

    border: 5px solid #eee;

  }

  .effect6 .txt {

    position: absolute;

    right: 0;

    top: 0;

    background: #fff;

    width: 70%;

    height: 90%;

    padding: 5% 15%;

    transition: 0.6s;

    transform: scale(0);

    backface-visibility: hidden;

  }

  .effect6:hover .txt {

    transform: scale(1);

    border-radius: 50% 0 50% 0;

  }

  .effect6:hover img {

    transform: scale(1.1);

  }

  .button1 {

    background: #555;

    padding: 50px 0;

    margin-bottom: 50px;

    overflow: hidden;

  }

  .btn {

    color: #fff;

    cursor: pointer;

    display: inline-block;

    font-size: 16px;

    font-weight: 400;

    line-height: 45px;

    margin: 0 auto 2em;

    max-width: 160px;

    position: relative;

    text-decoration: none;

    text-transform: uppercase;

    vertical-align: middle;

    width: 100%;

    margin: 0 10px;

  }

  .btn:hover {

    text-decoration: none;

  }

  .btn1 {

    background: #296ebc;

    font-weight: 100;

  }

  .btn1 svg {

    height: 45px;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

  }

  .btn1 rect {

    fill: none;

    stroke: #fff;

    stroke-width: 2;

    stroke-dasharray: 422, 0;

  }

  .btn1:hover {

    background: #296ebc;

    font-weight: 900;

    letter-spacing: 1px;

  }

  .btn1:hover rect {

    stroke-width: 5;

    stroke-dasharray: 15, 310;

    stroke-dashoffset: 48;

    -webkit-transition: all 1.35s cubic-bezier(0.19,1,0.22,1);

    transition: all 1.35s cubic-bezier(0.19,1,0.22,1);

  }

  .btn2 {

    letter-spacing: 0;

  }

  .btn2:hover,

  .btn2:active {

    letter-spacing: 5px;

  }

  .btn2:after,

  .btn2:before {

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    border: 1px solid rgba(255,255,255,0);

    bottom: 0px;

    content: " ";

    display: block;

    margin: 0 auto;

    position: relative;

    -webkit-transition: all 280ms ease-in-out;

    transition: all 280ms ease-in-out;

    width: 0;

  }

  .btn2:hover:after,

  .btn2:hover:before {

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    border-color: #fff;

    -webkit-transition: width 350ms ease-in-out;

    transition: width 350ms ease-in-out;

    width: 70%;

  }

  .btn2:hover:before {

    bottom: auto;

    top: 0;

    width: 70%;

  }

  .btn3 {

    background: #296ebc;

    border: 1px solid #da251f;

    box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;

    font-weight: 900;

    letter-spacing: 1px;

    -webkit-transition: all 150ms linear;

    transition: all 150ms linear;

  }

  .btn3:hover {

    background: #296ebc;

    border: 1px solid rgba(0,0,0,0.05);

    box-shadow: 1px 1px 2px rgba(255,255,255,0.2);

    color: #ec817d;

    text-decoration: none;

    text-shadow: -1px -1px 0 #c2211c;

    -webkit-transition: all 250ms linear;

    transition: all 250ms linear;

  }

  .btn4 {

    border: 1px solid;

    overflow: hidden;

    position: relative;

  }

  .btn4 span {

    z-index: 20;

  }

  .btn4:after {

    background: #fff;

    content: "";

    height: 155px;

    left: -75px;

    opacity: .2;

    position: absolute;

    top: -50px;

    -webkit-transform: rotate(35deg);

    -ms-transform: rotate(35deg);

    transform: rotate(35deg);

    -webkit-transition: all 550ms cubic-bezier(0.19,1,0.22,1);

    transition: all 550ms cubic-bezier(0.19,1,0.22,1);

    width: 50px;

    z-index: 10;

  }

  .btn4:hover:after {

    left: 120%;

    -webkit-transition: all 550ms cubic-bezier(0.19,1,0.22,1);

    transition: all 550ms cubic-bezier(0.19,1,0.22,1);

  }

  .btn5 {

    border: 0 solid;

    box-shadow: inset 0 0 20px rgba(255,255,255,0);

    outline: 1px solid;

    outline-color: rgba(255,255,255,0.5);

    outline-offset: 0px;

    text-shadow: none;

    -webkit-transition: all 1250ms cubic-bezier(0.19,1,0.22,1);

    transition: all 1250ms cubic-bezier(0.19,1,0.22,1);

  }

  .btn5:hover {

    border: 1px solid;

    box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.2);

    outline-color: rgba(255,255,255,0);

    outline-offset: 15px;

    text-shadow: 1px 1px 2px #427388;

  }

  .btn-hvr:before,

  .btn-hvr:after {

    z-index: -1;

    box-sizing: border-box;

    transition: 0.5s;

  }

  .btn-hvr {

    position: relative;

    overflow: hidden;

    z-index: 1;

    transition: all .3s;

  }

  .btn-hvr0:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 80px;

    background: #296ebc;

  }

  .btn-hvr0:hover {

    color: #fff;

  }

  .btn-hvr0:hover:before {

    width: 250px;

  }

  .btn-hvr1:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: #296ebc transparent transparent transparent;

    position: absolute;

    top: 0;

    left: 0;

  }

  .btn-hvr1:hover {

    color: #ecdcd4;

  }

  .btn-hvr1:hover:after {

    border-width: 330px 330px 0 0;

  }

  .btn-hvr1:active {

    background: #b27254;

  }

  .btn-hvr1-2 {

    color: #bc4b41;

  }

  .btn-hvr1-2:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent transparent #6a1a13;

    position: absolute;

    bottom: 0;

    left: 0;

  }

  .btn-hvr1-2:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent #6a1a13 transparent;

    position: absolute;

    right: 0;

    bottom: 0;

  }

  .btn-hvr1-2:hover {

    color: #ebcac7;

  }

  .btn-hvr1-2:hover:before {

    border-width: 206.25px 0 0 206.25px;

  }

  .btn-hvr1-2:hover:after {

    border-width: 0 0 206.25px 206.25px;

  }

  .btn-hvr1-2:active {

    background: #b02b20;

  }

  .btn-hvr2 {

    color: #48a6b1;

  }

  .btn-hvr2:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent transparent #185a62;

    position: absolute;

    bottom: 0;

    left: 0;

  }

  .btn-hvr2:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent #185a62 transparent transparent;

    position: absolute;

    top: 0;

    right: 0;

  }

  .btn-hvr2:hover {

    color: #c9e5e8;

  }

  .btn-hvr2:hover:before {

    border-width: 165px 0 0 165px;

  }

  .btn-hvr2:hover:after {

    border-width: 0 165px 165px 0;

  }

  .btn-hvr2:active {

    background: #2896a3;

  }

  .btn-hvr3 {

    color: #ad96a0;

  }

  .btn-hvr3:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent transparent #5f4f56;

    position: absolute;

    bottom: 0;

    left: 0;

  }

  .btn-hvr3:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent #5f4f56 transparent transparent;

    position: absolute;

    top: 0;

    right: 0;

  }

  .btn-hvr3 span:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent #5f4f56 transparent;

    position: absolute;

    right: 0;

    bottom: 0;

  }

  .btn-hvr3 span:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: #5f4f56 transparent transparent transparent;

    position: absolute;

    top: 0;

    left: 0;

  }

  .btn-hvr3:hover {

    color: #e7e0e3;

  }

  .btn-hvr3:hover:before {

    border-width: 165px 0 0 165px;

  }

  .btn-hvr3:hover:after {

    border-width: 0 165px 165px 0;

  }

  .btn-hvr3:hover span:before {

    border-width: 0 0 165px 165px;

  }

  .btn-hvr3:hover span:after {

    border-width: 165px 165px 0 0;

  }

  .btn-hvr3:active {

    background: #9e838f;

  }

  .btn-hvr4 {

    color: #8d53b3;

  }

  .btn-hvr4:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent #492064 transparent transparent;

    position: absolute;

    top: 0;

    right: 0;

  }

  .btn-hvr4:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent transparent #492064;

    position: absolute;

    bottom: 0;

    left: 0;

  }

  .btn-hvr4:before,

  .btn-hvr4:after {

    border-color: #492064;

  }

  .btn-hvr4 span:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: #492064 transparent transparent transparent;

    position: absolute;

    top: 0;

    left: 0;

  }

  .btn-hvr4 span:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent #492064 transparent;

    position: absolute;

    right: 0;

    bottom: 0;

  }

  .btn-hvr4 span:before,

  .btn-hvr4 span:after {

    border-color: #492064;

  }

  .btn-hvr4:hover {

    color: #decde9;

  }

  .btn-hvr4:hover:before {

    border-width: 20px 62.5px;

  }

  .btn-hvr4:hover:after {

    border-width: 20px 62.5px;

  }

  .btn-hvr4:hover span:before {

    border-width: 20px 62.5px;

  }

  .btn-hvr4:hover span:after {

    border-width: 20px 62.5px;

  }

  .btn-hvr4:active {

    background: #7935a6;

  }

  .btn-hvr5 {

    color: #808695;

  }

  .btn-hvr5:after {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent #3f444e transparent transparent;

    position: absolute;

    top: 0;

    right: 0;

  }

  .btn-hvr5:before {

    content: '';

    width: 0;

    height: 0;

    -webkit-transform: rotate(360deg);

    border-style: solid;

    border-width: 0 0 0 0;

    border-color: transparent transparent transparent #3f444e;

    position: absolute;

    bottom: 0;

    left: 0;

  }

  .btn-hvr5:hover {

    color: #dadce0;

  }

  .btn-hvr5:hover:before,

  .btn-hvr5:hover:after {

    border-width: 80px 262.5px;

  }

  .btn-hvr5:active {

    background: #697182;

  }

  .btn-hvr6 {

    color: #80629f;

  }

  .btn-hvr6 span {

    position: absolute;

    display: block;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: #402a55;

    -webkit-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

    -webkit-transition: width 0.4s, height 0.4s;

    transition: width 0.4s, height 0.4s;

    z-index: -1;

  }

  .btn-hvr6:hover {

    color: #dad1e3;

  }

  .btn-hvr6:hover span {

    width: 562.5px;

    height: 562.5px;

  }

  .btn-hvr6:active {

    background: #6a468e;

  }

  .btn-hvr7 {

    color: #27692b;

  }

  .btn-hvr7:before,

  .btn-hvr7:after,

  .btn-hvr7 span:before,

  .btn-hvr7 span:after {

    content: '';

    position: absolute;

    top: 0;

    width: 63.5px;

    height: 0;

    background: #012f04;

  }

  .btn-hvr7:before {

    left: 0;

  }

  .btn-hvr7:after {

    left: 125px;

  }

  .btn-hvr7 span:before,

  .btn-hvr7 span:after {

    top: auto;

    bottom: 0;

  }

  .btn-hvr7 span:before {

    left: 62.5px;

  }

  .btn-hvr7 span:after {

    left: 187.5px;

  }

  .btn-hvr7:hover {

    color: #c0d3c1;

  }

  .btn-hvr7:hover:before,

  .btn-hvr7:hover:after,

  .btn-hvr7:hover span:before,

  .btn-hvr7:hover span:after {

    height: 80px;

  }

  .btn-hvr7:active {

    background: #014f06;

  }

  .btn-hvr8 {

    color: #5177a7;

  }

  .btn-hvr8:before,

  .btn-hvr8:after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 250px;

    height: 0;

    background: #296ebc;

  }

  .btn-hvr8:after {

    top: auto;

    bottom: 0;

  }

  .btn-hvr8:hover:before,

  .btn-hvr8:hover:after {

    height: 40px;

  }

  .btn-hvr8:active {

    background: #325f98;

  }

  .btn-hvr9 {

    color: #c93a8e;

  }

  .btn-hvr9:before,

  .btn-hvr9:after,

  .btn-hvr9 span:before,

  .btn-hvr9 span:after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 250px;

    height: 0;

    background: rgba(115,14,73,0.25);

    -webkit-transition: 0.4s;

    transition: 0.4s;

  }

  .btn-hvr9:after,

  .btn-hvr9 span:before {

    top: auto;

    bottom: 0;

  }

  .btn-hvr9 span:before,

  .btn-hvr9 span:after {

    -webkit-transition-delay: 0.4s;

    transition-delay: 0.4s;

  }

  .btn-hvr9:hover {

    color: #efc5de;

  }

  .btn-hvr9:hover:before,

  .btn-hvr9:hover:after,

  .btn-hvr9:hover span:before,

  .btn-hvr9:hover span:after {

    height: 80px;

  }

  .btn-hvr9:active {

    background: #c0177a;

  }

  .btn-hvr10 {

    color: #8f5c82;

  }

  .btn-hvr10:before,

  .btn-hvr10:after,

  .btn-hvr10 span:before,

  .btn-hvr10 span:after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 80px;

    background: rgba(74,38,65,0.25);

    -webkit-transition: 0.4s;

    transition: 0.4s;

  }

  .btn-hvr10:after,

  .btn-hvr10 span:before {

    left: auto;

    right: 0;

  }

  .btn-hvr10 span:before,

  .btn-hvr10 span:after {

    -webkit-transition-delay: 0.4s;

    transition-delay: 0.4s;

  }

  .btn-hvr10:hover {

    color: #decfda;

  }

  .btn-hvr10:hover:before,

  .btn-hvr10:hover:after,

  .btn-hvr10:hover span:before,

  .btn-hvr10:hover span:after {

    width: 250px;

  }

  .btn-hvr10:active {

    background: #7b3f6c;

  }

  @-webkit-keyframes criss-cross-left {

    0% {

      left: -20px;

    }

    50% {

      left: 50%;

      width: 20px;

      height: 20px;

    }

    100% {

      left: 50%;

      width: 375px;

      height: 375px;

    }

  }

  @keyframes criss-cross-left {

    0% {

      left: -20px;

    }

    50% {

      left: 50%;

      width: 20px;

      height: 20px;

    }

    100% {

      left: 50%;

      width: 375px;

      height: 375px;

    }

  }

  @-webkit-keyframes criss-cross-right {

    0% {

      right: -20px;

    }

    50% {

      right: 50%;

      width: 20px;

      height: 20px;

    }

    100% {

      right: 50%;

      width: 375px;

      height: 375px;

    }

  }

  @keyframes criss-cross-right {

    0% {

      right: -20px;

    }

    50% {

      right: 50%;

      width: 20px;

      height: 20px;

    }

    100% {

      right: 50%;

      width: 375px;

      height: 375px;

    }

  }

  .btn-hvr11 {

    position: relative;

    color: #9a7cba;

  }

  .btn-hvr11:before,

  .btn-hvr11:after {

    position: absolute;

    top: 50%;

    content: '';

    width: 20px;

    height: 20px;

    background: #8865ae;

    border-radius: 50%;

  }

  .btn-hvr11:before {

    left: -20px;

    -webkit-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

  }

  .btn-hvr11:hover:before {

    -webkit-animation: criss-cross-left 0.8s both;

    animation: criss-cross-left 0.8s both;

  }

  .btn-hvr11:hover:after {

    -webkit-animation: criss-cross-right 0.8s both;

    animation: criss-cross-right 0.8s both;

  }

  .sea-product ul.mycol {

    margin: 0 -10px;

  }

  .sea-product li.col {

    padding: 0 10px;

    margin-bottom: 20px;

  }

  .sea-product li {

    transition: all .3s;

  }

  .sea-product li:hover {

    transform: translateY(-10px);

  }

  .sea-product li .img {

    height: 280px;

    line-height: 280px;

    text-align: center;

    position: relative;

  }

  .sea-product li img {

    max-width: 80%;

    max-height: 80%;

  }

  .sea-product li h4 {

    height: 50px;

    line-height: 50px;

    color: #1e242b;

    font-size: 18px;

    overflow: hidden;

    text-align: center;

  }

  @media (max-width: 1130px){.header .nav {

width: calc(151% - 1028px);}}

  @media (max-width: 1230px) {

    .header {

      display: none;

    }

    .header-m {

      display: block;

    }

  }